Python | Uploading images in Django
Prerequisite – Introduction to Django
In most of the websites, we often deal with media data such as images, files etc. In django we can deal with the images with the help of model field which is
In this article, we have created the app
image_app in a sample project named image_upload.
The very first step is to add below code in the
MEDIA_ROOT is for server path to store files in the computer.
MEDIA_URL is the reference URL for browser to access the files over Http.
urls.py we should edit the configuration like this
from django.conf import settings from django.conf.urls.static import static if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
models.py should be like this, in that we have created a Hotel model which consists of hotel name and its image.
In this project we are taking the hotel name and its image from the user for hotel booking website.
upload_to will specify, to which directory the images should reside, by default django creates the directory under media directory which will be automatically created when we upload an image. No need of explicit creation of media directory.
We have to create a
forms.py file under
image_app, here we are dealing with model form to make content easier to understand.
Django will implicitly handle the form verification’s with out declaring explicitly in the script, and it will create the analogous form fields in the page according to model fields we specified in the
This is the advantage of model form.
Now create a templates directory under
image_app in that we have to create a html file for uploading the images. HTML file should look like this.
When making a POST request, we have to encode the data that forms the body of the request in some way. So, we have to specify the encoding format in the form tag.
multipart/form-data is significantly more complicated but it allows entire files to be included in the data.
csrf_token is for protection against Cross Site Request Forgeries.
form.as_p simply wraps all the elements in HTML paragraph tags. The advantage is not having to write a loop in the template to explicitly add HTML to surround each title and field.
image_app in that we have to write a view for taking requests from user and gives back some html page.
hotel_image_view hits and that request is
POST, we are creating an instance of model form
form = HotelForm(request.POST, request.FILES) image will be stored under
request.FILES one. If it is valid save into the database and redirects to success url which indicates successful uploading of the image. If the method is not POST we are rendering with html template created.
urls.py will look like this –
Now make the migrations and run the server.
When we hit the URL in the browser, in this way it looks.
After uploading the image it will show success.
Now in the project directory
media directory will be created, in that images directory will be created and the image will be stored under it. Here is the final result.
Now we can write a view for accessing those images, for simplicity let’s take example with one image and it is also applicable for many images.
A sample html file template for displaying images.
Insert the url path in the urls.py file
# urls.py path('hotel_images', display_hotel_images, name = 'hotel_images'),
Here is the final view on the browser when we try to access the image.