Upload multiple images to your Django app using Dropzone Js

Hello guys it's been a minute! I was on a small break but now am back and in this tutorial we are going to learn how we can upload multiple images to a Django back end. By default the Django behavior is that you select a single image and upload it to the server then repeat which begs the question isn't that a time consuming and tedious process, say if we have 1000 images? It is.
Fortunately, there is a tool that can help us go around this problem, a JavaScript library called Dropzone . Let's not waste more seconds, let's get into it!

PROJECT SETUP

Let's quickly navigate to our desktop directory and bootstrap the back end.

cd ~/Desktop

mkdir django_dropzone && cd django_dropzone

virtualenv env

source env/bin/activate

pip install django

django-admin startproject mysite .

python manage.py startapp core

Next add core to the list of installed apps in settings.py.
While there also update the templates section as follows:

import os

'DIRS': [os.path.join(BASE_DIR, 'templates')],

Then also update the static settings like so:

STATIC_URL = '/static/'
if DEBUG:
    STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
else:
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

IMAGE MODEL

We have set up our settings.py and it's good to go. Move to core/models.py and add the following code:

from django.db import models

# Create your models here.

class Image(models.Model):
    image=models.ImageField(upload_to='images/')
    date = models.DateTimeField( auto_now_add=True)

    class Meta:
        ordering=['-date']

    def __str__(self):
        return str(self.date)

Go ahead and makemigrations then migrate to apply the changes to the db.
Next we go the the views.py. Write the following code to it.

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from .models import Image
# Create your views here.

def home(request):
    images=Image.objects.all()
    context={
        'images':images
    }
    return render(request, 'index.html', context)

def file_upload(request):
    if request.method == 'POST':
        my_file=request.FILES.get('file')
        Image.objects.create(image=my_file)
        return HttpResponse('')
    return JsonResponse({'post':'fasle'})

Next create core/urls.py and add the following code to it:

from django.urls import path
from . import views
urlpatterns = [
    path('', views.home, name='home'),
    path('upload/', views.file_upload),
]

To finalise the Python part, add the following code to the project's urls.py

rom 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('core.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

DROPZONE SETUP

We are done with the logic let's do the UI stuff. Create a folder called static and in it create two files:

touch static/main.js

touch static/style.css

Add the following code to main.js:

Dropzone.autoDiscover=false;
const myDropzone= new Dropzone('#my-dropzone',{
    url:'upload/',
    maxFiles:5,
    maxFilesize:2,
    acceptedFiles:'.jpg',
})

And the following to style.css:

body {
    background-color: #f8f8f8 !important;
}

.dz {
    border: dashed !important;
    background-color: #ccc !important;
    border-radius: 10px !important;
}

.dz:hover {
    background-color: aliceblue !important;
}

Next create a folder called templates and in it create two files:

touch templates/base.html

touch templates/index.html

Add the following code to base.html

{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Font awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- custom css & js -->
    <link rel="stylesheet" href="{% static 'style.css' %}">
    <script src="{% static 'main.js' %}" defer></script>

    <script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">


    <title>Drag and Drop Django| {% block title %}{% endblock title %}</title>
  </head>
  <body>
    <div class="container mt-3">
        {% block content %}
        {% endblock content %}
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

And the following to index.html:

{% extends 'base.html' %}

{%block content%}
<h6>UPLOAD MULTIPLE IMAGES NOW</h6>
<br>
<form enctype='multipart/form-data' action="upload/" method='POST' class="dropzone dz" id="my-dropzone" >
    {% csrf_token %}
    <div class="fallback">
      <input name="file" type="file" multiple />
    </div>
</form>
{%endblock%}

SPIN UP THE SERVER

Now go to the terminal and:

python manage.py runserver

Check the browser and upload images, be sure to select multiple.

and

MISSION SUCCESS

Yeah that should do it for this article. Thanks for keeping me company and coding along. You can grab the source code of this project here
You can connect with me on LinkedIn and on Twitter
Cheers and see you next time!

Blog

Upload multiple images to your Django app using Dropzone Js

Nick Langat

PROJECT SETUP

IMAGE MODEL

DROPZONE SETUP

SPIN UP THE SERVER

MISSION SUCCESS

Join Our Newsletter. No Spam, Only the good stuff.

Related