In today’s article, I will try to create a web app that uploads and displays images in Django.
![](https://ymgsapo.com/wp-content/uploads/2018/11/スクリーンショット-2019-01-07-23.49.53.png)
It is an application to select and upload photos. The name of the photo, the photo, and the date and time of posting are displayed.
Library installation
You need a library called pillow to handle images. Please install it with the following command.
pip install pillow
Add directory for media
Add or modify settings.py as follows.
ai_webapp/settings.py
TIME_ZONE = 'Asia/Tokyo' MEDIA_ROOT = os.path.join(BASE_DIR, 'media') MEDIA_URL = '/media/'
Create a folder named “media” under the project folder.
URL setting
Add the following settings to urls.py of the project.
ai_webapp/urls.py
from . import settings from django.contrib.staticfiles.urls import static from django.contrib.staticfiles.urls import staticfiles_urlpatterns urlpatterns = [ path('admin/', admin.site.urls), path('ai_image/', include('ai_image.urls')) ] urlpatterns += staticfiles_urlpatterns() urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Please note that without these two lines, the image will not be displayed.
model
It is a model for handling images.
from django.db import models class Document(models.Model): description = models.CharField(max_length=255, blank=True) photo = models.ImageField(upload_to='documents/', default='defo') uploaded_at = models.DateTimeField(auto_now_add=True)
By setting upload_to to ‘documents’, images will be saved in “/media/documents”.
Form
from django import forms from .models import Document class DocumentForm(forms.ModelForm): class Meta: model = Document fields = ('description', 'photo',)
View
from django.shortcuts import render, redirect from .forms import DocumentForm from .models import Document def index(request): if request.method == 'POST': form = DocumentForm(request.POST, request.FILES) if form.is_valid(): form.save() return redirect('index') else: form = DocumentForm() obj = Document.objects.all() return render(request, 'ai_image/model_form_upload.html', { 'form': form, 'obj': obj })
template
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Upload</title> </head> <body> <form method="post" enctype="multipart/form-data"> {% csrf_token %} {{ form.as_p }} <button type="submit">Upload</button> </form> {% for item in obj %} <tr> <td>{{ item.description }}</td> <td><img src="{{ item.photo.url }}" width="100" height="100"/></td> <td>{{ item.uploaded_at }}</td> <tr> {% endfor %} </body> </html>
migration
python manage.py makemigrations ai_image python manage.py migrate python manage.py runserver
Management tool
It is a method to delete the unnecessary image from the management screen.
python manage.py createsuperuser
Enter an appropriate username, email address and password.
admin.py
from django.contrib import admin from .models import Document # Register your models here. admin.site.register(Document)
You can access the management page with the following command.
http://localhost:8000/admin
Reference
https://matthiasomisore.com/web-programming/display-image-in-a-django-template-using-imagefield/