Django Magic: Elevating Your Project with User-Generated Media Excellence

Tharicq
Django Unleashed
Published in
4 min readDec 14, 2023

In the dynamic world of web development, creating applications that seamlessly handle media files, such as images, documents, and videos, is an integral aspect of delivering rich user experiences. For Django developers, mastering the art of media file handling is a key skill that unlocks a world of possibilities.

Django, a high-level Python web framework, comes equipped with robust tools for efficiently managing media files. From user-uploaded profile pictures to downloadable documents, Django’s media file-handling capabilities empower developers to build feature-rich applications that cater to a diverse range of needs.

In this blog, we are going to discuss how users can upload their documents using the Django media file concept.

My file structure is going to be like this throughout this tutorial.

project_folder/

├── project_name/
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py

├── app_folder/
│ ├── migrations/
│ │ └── __init__.py
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── forms.py
│ ├── tests.py
│ └── views.py

├── media/
├── static/
├── templates/
│ └── upload_file.html

├── db.sqlite3
├── manage.py
└── requirements.txt
│── media/uploads
  1. Define a model with a FileField to store the uploaded file:

In Django’s FileField, the upload_to parameter specifies the subdirectory within your media storage

# models.py
from django.db import models

class MyModel(models.Model):
document = models.FileField(upload_to='uploads/')

2. In your project’s settings, make sure to configure the MEDIA_ROOT and MEDIA_URL settings:

# settings.py
import os

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

create a folder named media in your BASE DIRECTORY.

  • The files uploaded by the user will be stored here.

3. Create a form to handle file uploads:

# forms.py
from django import forms
from .models import MyModel

class MyModelForm(forms.ModelForm):
class Meta:
model = MyModel
fields = ['document']

4. Create a view to handle the form and file uploads:

# views.py
from django.shortcuts import render, redirect
from .forms import MyModelForm

def upload_file(request):
if request.method == 'POST':
form = MyModelForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return redirect('success_url') # Redirect to a success page
else:
form = MyModelForm()
return render(request, 'upload_file.html', {'form': form})
  • request.POST: This represents the data submitted in the HTTP POST request. It’s a dictionary-like object that contains the form data. In Django, form data is transmitted through the POST method, especially when dealing with sensitive information like passwords or when uploading files.
  • request.FILES: This represents any files that were included in the form submission. In Django, files are transmitted separately from regular form data, and they are accessed through the request.FILES dictionary-like object.
  • It is mandatory to get any file from the post request.

5. If you’re dealing with a form that includes file uploads (<input type=”file”>), you must include enctype=”multipart/form-data” in the <form> tag. The multipart/form-data enctype is specifically designed to handle binary data, such as files.

<form method="post" action="/your/action/" enctype="multipart/form-data">
{% csrf_token %}
<!-- Your form fields, including file uploads -->
<input type="file" name="file_field">
<!-- Other form fields go here -->
<button type="submit">Submit</button>
</form>

If you omit enctype=”multipart/form-data”, file uploads won’t work correctly. The form submission will likely fail, and the uploaded files won’t be processed correctly on the server side.

Final output

In the resume upload section, you can see that the resume has been chosen by the user.

Now register your model in admin.py file

from django.contrib import admin
from . models import MyModel

admin.site.register(MyModel)

After the submit button is clicked go to the admin panel to check whether the data is saved or not. In my case, you can see that the resume is stored in the database.

I previously said that the resume would be stored in the media folder. From the above image, you can see that the resume is stored in the media folder as discussed earlier.

Dear readers, you can access the full code at my repository

👦 Follow me: user1409 for more tutorials like this.

Read my other blogs :

😇 Thank you for spending your valuable time reading my blog 😇

--

--