In this Python Django Tutorial, we will learn Python Django app upload files. And we’ll also see examples related to this. These are the following topics that we are going to discuss in this tutorial.
- Python Django app upload files
- Python Django model fields
- Python Django File Upload
- Python Django Image Upload
- Python Django view uploaded files at front-end
Python Django app upload files
Uploading means sending a file from a local computer to a remote system, which stores a copy of the material being transferred. It is possible to upload images, videos, movies, music, sounds, freeware, shareware, and text files.
Python Django model fields
To upload files in Django, Django has different model fields. And, these fields are used to handle different files type.
There are two model fields in Django:
- ImageField
- FileField
Let’s discuss each field one by one to get an overview:
ImageField:
ImageField is a model field that exclusively accepts image formats for upload. And some command image file formats are as follow:
- GIF (.gif)
- PNG (.png)
- TIFF (.tif, .tiff)
- Bitmap (.bmp)
- JPEG (.jpg, .jpeg)
- EPS (.eps)
- RAW Image Files (orf, .sr, .raw, .cr, .nef, and more)
The Pillow library is required by ImageField. To install the same run, follow these steps.
pip install Pillow
Syntax of ImageField:
field_name = models.ImageField(upload_to=None, height_field=None, width_field=None, max_length=100, **args)
FileField
FileField is a model field that is used to upload files. And, some of the common file formats are:
- MP4
- SVG
- MP3
- Docx
Syntax of FileField:
field_name = models.FileField(upload_to=None, max_length=254, **args)
Also, check: Login system in Python Django
Python Django File Upload
Create Project And App: Firstly, we have to create a project and app. So, to create it use the below define code.
# Project
django-admin startproject project_name
# App
python manage.py startapp app_name
Here, I create a project with the name PythonGuides and an app with the name home.
Install App: After, creating the project and app successfully. you have to install an App. For this, you have to add our app in the settings.py file.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'home',
]
To save uploaded files, modify settings: Now add the following lines to the end of the settings.py file.
import os
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
- MEDIA URL: The URL endpoint is specified here. This is the URL where the user can upload their files from their browser.
- MEDIA ROOT: This defines the root path where the file will be saved.
- The second line directs Django to save all uploaded files in the BASE DIR, i.e., the project Directory, in a folder called ‘media’.
- We must manually create the folder so that all uploaded files are saved in the media folder.
Media Folder: Create a new folder called ‘media’ in the project folder.
Project URLs: You have to add a link to your new app that is created. Add the below code snippets to the urls.py file of PythonGuides.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('home.urls'))
]
App URLs: You have to add the path of the function views. Add the below code snippets to the urls.py file of the home.
from django.urls import path,include
from . import views
urlpatterns = [
path('UploadFile', views.UploadFile, name='UploadFile'),
]
Create Model: In models.py, create a new Django Model “Blog” and then add the following code.
from django.db import models
class Blog(models.Model):
author = models.CharField(max_length=100)
title = models.CharField(max_length=200)
file = models.FileField(upload_to='documents/')
- We create the model CharField, which stores the name of the author who uploads a file.
- Then, we create one more CharField, which stores the title of the file that the user uploads.
- Then, we use the FileField used for files that the user will upload.
- The upload_to option defines the location within the media where the file will be saved.
Create Form: We’ll now import the “Blog” Model into forms.py and create the “BlogForm” ModelForm.
from django import forms
from .models import Blog
class BlogForm(forms.ModelForm):
class Meta:
model = Blog
fields = ['author', 'title', 'file']
Create Views: Implement the form in the views.py file. Here, we need to upload the files. So, simply add the request.FILES along with the request.POST.
The syntax is as below:
form = BlogForm(request.POST,request.FILES)
Add, the following code snippets to the views.py file.
from django.shortcuts import render, HttpResponse
from .forms import BlogForm
def UploadFile(request):
if request.method == 'POST':
form = BlogForm(request.POST,request.FILES)
if form.is_valid():
form.save()
return HttpResponse('The file is saved')
else:
form = BlogForm()
context = {
'form':form,
}
return render(request, 'Upload.html', context)
- Here, we create the UploadFile function.
- Then, we check whether the request method is POST or not.
- After this, we simply add a request.FILES along with the request.POST to the form method.
- Here we use the is_valid() method in view functions as it returns values as True and False.
- Then, we return to HttpResponse and also render to HTML template.
Create HTML Template: Now, create a Upload.html template that shows the form. Add the following code in the upload.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Files</title>
</head>
<body>
<form method='post' enctype="multipart/form-data">
{% csrf_token %}
{{form.as_p}}
<input type="submit" value="Submit">
</form>
</body>
</html>
- Now, create the <form> attribute in the template file.
- Next, add the enctype =”multipart/form-data” otherwise, the form won’t work.
- We also use the csrf_token tag is used in form to avoid malicious attacks.
- Then, we use form.as_p tag to render Django forms as a paragraph.
Django Database Migrations: It is the process of transferring changes made to a model to the database schema.
Run the following commands in the terminal:
# Make Migartions
python manage.py makemigrations
# Migrate
python manage.py migrate
- makemigrations: is used to make a migration file that includes code for a model’s tabular schema.
- migrate: is used to builds tables in accordance with the migration file’s schema.
Run Server: Start the server and access the form by defining the URL as http://127.0.0.1:8000/UploadFile.
Command to run the server:
python manage.py runserver
Here, Marry Smith upload the Introduction to Django file in Docx format.
When we click on Submit button, we move to HTTP Response that “The File is saved”.
View file in Media: You can see, the file is successfully stored in the Documents directory under the Media directory.
You can also upload pdf-based files. Let’s have a look at it.
Even you can upload files in mp4 format.
Read: Outputting Python to HTML Django
Python Django Image Upload
In this section, we’ll learn how to upload images in Django.
Create Project And App: First and foremost, we must develop a project and an app. So, to create it, use the defined code below.
# Project
django-admin startproject PythonGuides
# App
python manage.py startapp UploadApp
Here, I create a project with the name PythonGuides and an app with the name UploadApp.
Install App: After that, the project and app were successfully created. Now, you must install an application. You must include our app in the settings.py file to execute this.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'UploadApp',
]
To save uploaded files, modify settings: Now add the following lines to the end of the settings.py file.
import os
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
- First, import os.
- Then, to server the media files, we use MEDIA_URL.
- After this, to specify the root path where the file will be saved, we use MEDIA_ROOT.
Media Folder: In the project folder, make a new folder called ‘media’.
Project URLs: You must include a link to your newly developed app. Add the following code snippets to PythonGuides’s urls.py file.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('UploadApp.urls'))
]
App URLs: The path to the function views must be included. Add the following code snippets to the UploadApp’s urls.py file.
from django.urls import path,include
from . import views
urlpatterns = [
path('UploadImage', views.UploadImage, name='UploadImage'),
]
Create Model: In models.py, create a new Django Model “Course” and then add the following code.
from django.db import models
class Course(models.Model):
author = models.CharField(max_length=100)
title = models.CharField(max_length=200)
image = models.ImageField(upload_to='images/')
- Here, we define the model CharField, which store the name of the author who upload a image and also the title of the image.
- To upload the images, we use ImageField.
- The upload_to option defines that image will saved under images directory within the media directory.
Create Form: We’ll now import the “Course” Model into forms.py and create the “CourseForm” ModelForm.
from django import forms
from .models import Course
class CourseForm(forms.ModelForm):
class Meta:
model = Course
fields = ['author', 'title', 'image']
Create Views: Implement the form in the views.py file. Here, we need to upload the image, so, simply add the request.FILES along with the request.POST.
from django.shortcuts import render, HttpResponse
from .forms import CourseForm
def UploadImage(request):
if request.method == 'POST':
form = CourseForm(request.POST,request.FILES)
if form.is_valid():
form.save()
return HttpResponse('The image saved successfully')
else:
form = CourseForm()
context = {
'form':form,
}
return render(request, 'upload.html', context)
- Here, we create the UploadImage function which check whether the request method is POST or not.
- After this, we simply add a request.FILES along with the request.POST to the form method.
- Then, we use the is_valid() method in view functions as it returns values as True and False.
- And in last, we return to HttpResponse and also render to HTML template.
Create HTML Template: Now, create a Upload.html template that shows the form. Add the following code in the upload.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Files</title>
</head>
<body>
<form method='post' enctype="multipart/form-data">
{% csrf_token %}
{{form.as_p}}
<input type="submit" value="Submit">
</form>
</body>
</html>
- Now, create the <form> attribute in the template file.
- Next, add the enctype =”multipart/form-data” otherwise, the form won’t work.
- We also use the csrf_token tag in form to avoid malicious attacks.
- Then, we use form.as_p tag to render Django forms as a paragraph.
Django Database Migrations: Run the following commands in the terminal:
# Make Migartions
python manage.py makemigrations
# Migrate
python manage.py migrate
- makemigrations: Makes migration file that have model’s schema.
- migrate: Build tables according to migration file’s schema.
Run Server: Start the server and access the form by defining the URL as http://127.0.0.1:8000/UploadImage.
Command to run the server:
python manage.py runserver
Example #1
In this example, we upload an image in png format.
When we click on Submit button HTTP Response displays.
The uploaded file view in Images Directory within Media Directory.
Example #2
In this example, we upload an image in jpeg format.
The uploaded jpeg file view in Images Directory within Media Directory.
Example #3
In this example, we upload an image in gif format.
Read: Python Django vs ReactJS
Python Django view uploaded files at front-end
In this section, we’ll learn how to see uploaded images on the browser.
Create Project And App: Type the following command in the terminal.
# Project
django-admin startproject MyProject
# App
python manage.py startapp MyApp
Install App: Now, you must install an application. And add it in the settings.py file.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'MyApp,
]
To save uploaded files, modify settings: Now add the following lines to the end of the settings.py file.
import os
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
Media Folder: In the project folder, make a new folder called ‘media’.
Project URLs: Add the following code in the MyProject’s urls.py file.
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('MyApp.urls'))
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
- Here, we serve files uploaded by users from MEDIA_ROOT during development by adding static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT).
- Here, MEDIA_URL is kept as ‘media’ and document_root is the location of the uploaded file inside media folder.
- But, it only works when DEBUG is set to True and the URL specified in the settings is local.
App URLs: Add the following code in the MyApp’s urls.py file.
from django.urls import path
from . import views
urlpatterns = [
path('Upload', views.Upload, name='Upload'),
]
Create Model: Add the following code in the models.py file.
from django.db import models
class UploadImage(models.Model):
title = models.CharField(max_length=200)
image = models.ImageField(upload_to='images/')
Create Form: Add the following code in the forms.py file.
from django import forms
from .models import UploadImage
class UploadImageForm(forms.ModelForm):
class Meta:
model = UploadImage
fields = ['title', 'image']
Create View: Add the following code in the views.py file.
from django.shortcuts import render
from .forms import UploadImageForm
def Upload(request):
if request.method == 'POST':
form = UploadImageForm(request.POST,request.FILES)
if form.is_valid():
form.save()
img_object = form.instance
return render(request, 'ImageUpload.html', {'form': form, 'img_obj': img_object})
else:
form = UploadImageForm()
context = {
'form':form,
}
return render(request, 'ImageUpload.html', context)
- We also create image objects and render them to HTML templates.
Create Template: Add the following code in the upload.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Files</title>
</head>
<body>
<form method='post' enctype="multipart/form-data">
{% csrf_token %}
{{form.as_p}}
<input type="submit" value="Submit">
</form>
{% if img_obj %}
<h3>Succesfully uploaded :</h3>
<img src="{{ img_obj.image.url}}" alt="connect" style="max-height:500px">
{% endif %}
</body>
</html>
- In HTML Template, we use the if tag which checks if an image object is there shows it on the browser.
Migrate Database: Run the following commands in the terminal.
# Make Migartions
python manage.py makemigrations
# Migrate
python manage.py migrate
Run Server: Run the following command in the terminal.
python manage.py runserver
When we click on Submit Button. The output will be as below.
From here, we conclude that we can view the uploaded files from the browser front-end.
Also, take a look at some more Python Django tutorials.
- Run Python Script in Django
- Python Django random number
- Python Django concatenate string
- Python Django set timezone
- Python Change Django Version
- If statement in Django template
- Python Django form validation
- Python Django MySQL CRUD
- Django contact form with class based views
In this Python Django Tutorial, we discussed the Python Django App upload files. And also, discuss the following list of topics.
- Python Django app upload files
- Python Django model fields
- Python Django File Upload
- Python Django Image Upload
- Python Django view uploaded files at front-end
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.