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:
#mysite/urls.py
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
file
INSTALLED_APPS = [
'studentsApp.apps.StudentsappConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]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')The
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 studentsAppand 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
views.py
# 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():
form.save()
return HttpResponseRedirect('/student/')
else:
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
file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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>
</form>
<!-- Displaying data from the views -->
<h2>Students List</h2>
<table style="width:700px; border-style: solid; border-collapse: collapse;">
<thead>
<th>Name</th> <th>Email</th> <th>Phone</th> <th>Section</th> <th>Photo</th>
</thead>
<tbody>
{% for stud in dataObject %}
<tr>
<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>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>Now if we start the server and type in the browser the url address: http://127.0.0.1:8000/add_student we get a student registration form with a file upload field:
my-courses.net
