The File Upload feature allows users to upload images or other files and associate them with specific entities in the application. It is implemented using Django's built-in file handling capabilities, enabling developers to handle file storage and retrieval efficiently.
Define models to represent entities that can have associated files. Models include fields for storing file uploads.
from django.db import models class Document(models.Model): description = models.CharField(max_length=255, blank=True) document = models.FileField(upload_to='documents/') uploaded_at = models.DateTimeField(auto_now_add=True) def __str__(self): return self.description if self.description else str(self.id)
Create forms to handle file uploads associated with entities.
from django import forms from .models import Document class DocumentForm(forms.ModelForm): class Meta: model = Document fields = ('description', 'document')
Implement views to process file uploads and save them to the database.
from django.shortcuts import render, redirect from .forms import DocumentForm def upload_document(request): if request.method == 'POST': form = DocumentForm(request.POST, request.FILES) if form.is_valid(): form.save() # Save the uploaded document to the database return redirect('upload_success') # Redirect to the success page else: form = DocumentForm() return render(request, 'upload_document.html', {'form': form}) def upload_success(request): return render(request, 'upload_success.html')
Develop HTML templates to render the file upload forms and success message.
upload_document.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Upload Document</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .form-container { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 400px; width: 100%; } h2 { text-align: center; color: #333; } form { display: flex; flex-direction: column; } input[type="text"], input[type="file"], button { margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; } button { background-color: #4CAF50; color: white; border: none; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #45a049; } </style> </head> <body> <div class="form-container"> <h2>Upload Document</h2> <form method="post" enctype="multipart/form-data"> {% csrf_token %} {{ form.as_p }} <button type="submit">Upload</button> </form> </div> </body> </html>
upload_success.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Upload Success</title> </head> <body> <h2>Upload Successful!</h2> <p>Your document has been uploaded successfully.</p> </body> </html>
Define URL patterns to route requests to the appropriate views.
from django.urls import path from django.conf import settings from django.conf.urls.static import static from home import views urlpatterns = [ path('', views.upload_document, name='upload_document'), path('upload/success/', views.upload_success, name='upload_success'), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Media Settings: Configure media settings in settings.py for file uploads.
MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR / 'media'
File Storage:
documents/ folder under the MEDIA_ROOT directory.Run Migrations: Apply migrations to create the Document table.
python manage.py makemigrations python manage.py migrate
Testing:
This structure ensures smooth integration of the File Upload feature into any Django application.
Running the Development Server
The frontend view of file or image upload feature is attached below.
Here is the backend view where the data is stored and the stored file or images can be visible by the admin.
