Сделал Drap and Drop форму в Django, но не работает append файлов в html, когда они загружены без перезагрузки страницы и выдает ошибку в консоли
Я не знаю в каком коде проблема, в js, python или моем генетическом, поэтому скину, что есть, сам способ и код такого Drap and Drop я взял отсюда
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>
вот такие скрипты я импортирую
<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>
и вот так выглядит файл drag-and-drop-upload.js
$(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>"
)
}
}
});
});
В общем работает все, грузиться на сервер, но я бы хотел, что бы эти файлы отображались сразу, без перезагрузки страницы
