1 - Creating a new new app django studentsApp

It often happens that you want to add a file field to a registration or data insertion form ... So far we have not yet dealt with this type of field. the file field type can be treated either in isolation or within a model. To keep things simple, we will deal with this last type. Let's start by creating a mysite project in which we create an application named studentsApp

Next, let's create a directory named media within our mysite project. This folder must be configured within the settings.py file: settings.py

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

Next, let's configure the url.py files of the studentsApp application: urls.py So that the media files or images... are accessible, we must add to the


file the following command:

+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 

Thus our


file becomes:

from django.contrib import admin
from django.urls import path
from uploadFile import views
from django.conf.urls.static import static
from . import settings

urlpatterns = [
path('admin/', admin.site.urls),
path('add_student/', views.student),
]+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Now we need to register our application at the




2 - Creating a model for studentsApp

Consider the Students model example that we have already covered in the django models tutorial, to which we add a file field that allows students to attach their photos during registration:

# studentsApp/models.py
from django.db import models
class Students(models.Model):
name = models.CharField(max_length=25)
email = models.EmailField(max_length=40)
phone = models.IntegerField(max_length=40)
section = models.CharField(max_length=25)
photo = models.FileField(upload_to = 'photos')


upload_to = 'photos'

argument that we added tells django that the uploaded files should be saved in a folder named


. Do you have to manually create this directory? Well don't worry! Django will create it automatically when running the script. 

The necessary migrations are then carried out:

python manage.py makemigrations studentsApp

and then :

python manage.py migrate

3 - Creating an insert data form

We then create a forms.py file which will generate the form: forms.py

# studentsApp/forms.py
from django.forms import ModelForm
from studentsApp.models import Students

class StudentsForm(ModelForm):
class Meta:
model = Students
fields = ['name' , 'email' ,'phone' ,'section' , 'photo']

The views: will then be created in the same way as in the previous tutorial concerning django models with the difference of adding a request.FILES parameter:

4 - Creating views for studentsApp


# studentsApp/views.py
from django.http import HttpResponseRedirect
from django.shortcuts import render
from .forms import StudentsForm

def student(request):
if request.method == 'POST':
form = StudentsForm(request.POST, request.FILES)
if form.is_valid():
return HttpResponseRedirect('/student/')
form = StudentsForm()
return render(request, 'add_student.html', {'form': form})

5 - Building template for studentsApp

Finally, we just have to create the


template file without forgetting the parameter enctype="multipart/form-data" in the



<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<h2>Manage Students</h2>

<!-- Creating insert data form -->
<form enctype="multipart/form-data" method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="save btn btn−default">Save</button>

<!-- Displaying data from the views -->
<h2>Students List</h2>
<table style="width:700px; border-style: solid; border-collapse: collapse;">
<th>Name</th> <th>Email</th> <th>Phone</th> <th>Section</th> <th>Photo</th>

{% for stud in dataObject %}
<td>{{ stud.name }}</td><td>{{ stud.email }}</td>
<td>{{ stud.phone }}</td> <td>{{ stud.section }}</td>
<td><img src="media/{{ stud.photo }}" width="75" height="75" /></td>
{% endfor %}

Now if we start the server and type in the browser the url address: we get a student registration form with a file upload field: 


Younes Derfoufi

Leave a Reply