Learn how to Upload and Display Images in Django and store it in model using ImageField. You can upload multiple images using this Django Tutorial.
For uploading any image or file in Django, we need to install Pillow –
pip install Pillow
So the first step is add bellow code in settings.py of your django project –
STATIC_URL = '/static/' STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'), ) STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
And in urls.py file add the configurations –
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# Project url patterns…
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
How to Upload and Display Image in Django Model using ImageField
In this example, we will take a example Employee User Image Profile. We will upload Employee Profile Image in Django Model. Bellow is the Employee Django Model.
# models.py
class Employee(models.Model):
name = models.CharField(max_length=50)
emp_image = models.ImageField(upload_to='upload/')
Note – All the uploaded images will be store in media/upload folder.
Our Upload Image forms.py look like this –
# forms.py from django import forms from .models import Employee class EmployeeForm(forms.ModelForm): class Meta: model = Employee fields = ['name', 'emp_image']
Under templates directory, emp_image.html looks like this –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image upload example</title>
</head>
<body>
<form method = "post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Upload</button>
</form>
</body>
</html>
Whenever, we upload images or any file, we should add this in form tag – enctype="multipart/form-data" and {% csrf_token %}.
Our views.py load the EmployeeForm and render in emp_image.html
# views.py
from django.http import HttpResponseRedirect
from django.urls import reverse_lazy
from django.views.generic import TemplateView
from employee.forms import EmployeeForm
class EmployeeImage(TemplateView):
form = EmployeeForm
template_name = 'emp_image.html'
def post(self, request, *args, **kwargs):
form = EmployeeForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return HttpResponseRedirect(reverse_lazy('home', kwargs={'pk': pk}))
context = self.get_context_data(form=form)
return self.render_to_response(context)
def get(self, request, *args, **kwargs):
return self.post(request, *args, **kwargs)
Display Uploaded Image in Django HTML
It is very easy to Display in Image in Django Template. Here is emp_image_display.html file
{% load static %}
<!DOCTYPE html>
<html>
<body>
<h1>Name - {{emp.name}}</h1>
<img src="{{emp.emp_image.url}}" alt="Smiley face" width="250" height="250">
<br />
<a href="{% url 'home' %}">Go Back!!!</a>
</body>
</html>
And in views.py, we are using DetailView to Display Image.
from django.views.generic import DetailView from employee.models import Employee class EmpImageDisplay(DetailView): model = Employee template_name = 'emp_image_display.html' context_object_name = 'emp'
That’s it. We can Upload Image and Display Image in Django.
Find this tutorial on Github.
