Drag and drop с помощью jQuery в Django?

import time

from django.shortcuts import render, get_object_or_404, redirect
from django.http import JsonResponse
from django.views import View

from .forms import PhotoForm
from .models import Photo


class DragAndDropUploadView(View):

    def get(self, request):
        photos_list = Photo.objects.all()
        return render(self.request, 'base.html', {'photos': photos_list}) 

    def post(self, request):
        form = PhotoForm(self.request.POST, self.request.FILES)
        if form.is_valid():
            photo = form.save()
            data = {'is_valid': True, 'name': photo.file.name, 'url': photo.file.url}
        else:
            data = {'is_valid': False}
        return JsonResponse(data), redirect('/drag_and_drop_upload')

<div class="container">


<div id="drop-area">
<div style="text-align: center;">
  <form enctype="multipart/form-data" method="post" class="my-form">
    <p style="text-align: center;">Кидай файли в мене</p>
    <input id="fileupload" type="file" name="file" multiple
         accept="image/*"
         style="display: none;"
         data-url="{% url 'drag_and_drop_upload' %}"
         data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>


    <label class="button" for="fileupload">обрати декілька таких</label>
  </form>

<form method="post" action="{% url 'clear_database' %}">
  {% csrf_token %}
  <button type="submit" class="button">Почистити базу даних</button>
</form>
      



</div>  
</div>




     

<div class="card-columns gallery">

  {% for photo in photos %}
  <div class="card ">


    <img src="{{ photo.file.url }}" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title"><a href="{{ photo.file.url }}">{{ photo.file.name }}</a></h5>
      {{photo.pk}}
      <a style=" color: green;" href="{% url 'photo_remove' pk=photo.pk %}">в смітничок</i></a>
    </div>
  </div>

  {% endfor %}

</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/fileupload/jquery.ui.widget.js' %}"></script>
    <script src="{% static 'js/fileupload/jquery.iframe-transport.js' %}"></script>
    <script src="{% static 'js/fileupload/jquery.fileupload.js' %}"></script>
    <script src="{% static 'js/drag-and-drop-upload.js' %}"></script>

$(function () {

  $(".js-upload-photos").click(function () {
    $("#fileupload").click();
  });

  $("#fileupload").fileupload({
    dataType: 'json',
    done: function (e, data) {
      if (data.result.is_valid) {
        
        $(".gallery").prepend(
          "<div class='card'> <img src='" + data.result.url + "' class='card-img-top' alt='...'>" +  "<div class='card-body'><h5 class='card-title'><a href='" + data.result.url + "'>" + data.result.name + "</a></h5></div></div>"
        )
      }
    }
  });

});