Drag and drop with jQuery in Django?

Question

JavaScript

Made a Drap and Drop form in Django, but appending files to html does not work when they are loaded without reloading the page and gives an error in the console

spoiler

jquery.min.js:2 POST 127.0.0.1:8002/drag_and_drop_upload 500 (Internal Server Error)

I don’t know what code the problem is, in js, python or my genetic one, so I’ll throw off what I have, the method itself and the code of such Drap and Drop I took from here

spoiler

https://github.com/sibtc/multiple-file-upload/tree...

views.py

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')

html

<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>

these are the scripts I import

<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>

and this is how the drag-and-drop-upload.js file looks like

$(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>"
        )
      }
    }
  });

});

In general, everything works, it loads on the server, but I would like these files to be displayed immediately, without reloading the page

Answer 1

The sources are good, but it's better to find and post the full response of the erroneous answer in the browser