Файлы не загружаются в выбранный каталог после валидации формы с Dropzone.js и Django
Я пытаюсь реализовать функцию drag & drop для файлов на моей веб-странице (сейчас ограничена изображениями в целях тестирования). Я использую Django и Dropzone.js
Я думаю, что реализовал все правильно, но по какой-то причине, даже если форма подтверждена, содержимое не загружается в нужную папку.
forms.py
from django.forms import ModelForm
from crown_agents.models import FileHistory
class UploadFileForm(ModelForm):
class Meta:
model = FileHistory
fields = ('file_image',)
models.py
from django.db import models
from django.contrib.auth.models import User
class FileHistory(models.Model):
file_image = models.ImageField(null=True, blank=True, upload_to="project_files/")
user = models.ForeignKey(
User,
null=True,
blank=True,
on_delete=models.SET_NULL,
)
timestamp = models.DateTimeField( auto_now_add=True)
views.py
from django.contrib.auth.decorators import login_required
from django.conf import settings
from django.shortcuts import HttpResponse, render
from .forms import UploadFileForm
@login_required
def project_page(request):
context = {}
context['nbar'] = projects
if request.method == 'POST':
print(request.FILES)
form = UploadFileForm(request.POST, request.FILES)
if form.is_valid():
# file is saved
form.save()
return render(request, 'project_page.html', context)
print (form.errors)
else:
form = UploadFileForm()
context['form'] = form
return render(request, 'project_page.html', context)
urls.py
from django.conf import settings
from django.conf.urls.i18n import i18n_patterns
из django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include
from django.contrib.auth import views as auth_views
из django.utils.translation import gettext_lazy as _
from . import views
urlpatterns = [
path('i18n/', include('django.conf.urls.i18n')),
]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += i18n_patterns(
path('project_page', views.project_page, name='project_page'),
)
settings.py (truncated)
STATIC_URL = '/static/' STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]. STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
project_page.html (в основном обычный html, который наследуется от base.html)
<div class="container">
<label for="dropzone">Upload images dropzone</label>
<form action="project_page" id="DidDropzone" class="dropzone dz" accept-charset="UTF-8" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="dz-message">Click Here or Drop Files Here To Upload - 500kb maximum (0.5mb)</div>
</form>
<br>
<button id="image-btn" type="submit" >Add images</button>
</div>
base.html
{% load static %}
{% load bootstrap5 %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap 5.0.2 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></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">
<link rel="stylesheet" href="{% static 'css/dropzone_style.css' %}">
<script src="{% static 'js/dropzone.js' %}" defer></script>
</meta>
<title>{% block title %}web{% endblock %}</title>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<div id="content">
{% block content %}{% endblock %}
</div>
</div>
</body>
</html>
dropzone.js
var Drop = Dropzone.options.DidDropzone = {
autoProcessQueue: false, //stops from uploading files until user submits form
paramName: "image", // The name that will be used to transfer the file
maxFilesize: 8, // Maximum size of file that you will allow (MB)
clickable: true, // This allows the dropzone to select images onclick
acceptedFiles: '.jpg,.jpeg,.JPEG,.JPG,.png,.PNG', //accepted file types
maxFiles: 10, //Maximum number of files/images in dropzone
parallelUploads: 10,
previewTemplate: '<div class="dz-preview dz-image-preview">'+
'<div class="dz-image">'+
'<img data-dz-thumbnail />'+
'</div>'+
'<div class="dz-details">'+
'<div class="dz-filename"><span data-dz-name></span></div>'+
'<div class="dz-size" data-dz-size></div>'+
'</div>'+
'<div class="dz-success-mark"><span>✔</span></div>'+
'<div class="dz-error-mark"><span>✘</span></div>'+
'<div class="dz-error-message"><span data-dz-errormessage></span></div>'+
'</div>',
init: function(){
var submitButton = document.querySelector("#image-btn")
var url = $('#DidDropzone').attr("action")
myDropzone = this;
//process the queued images on click
submitButton.addEventListener("click", function() {
myDropzone.processQueue();
});
//fire the images to url
myDropzone.on("processing", function(file) {
myDropzone.options.url = url;
});
//clear the dropzone when complete
myDropzone.on("complete", function(file) {
myDropzone.removeFile(file);
});
},
success: function(file, json){
alert("Perfect! Now visit your gallery...")
},
}
Форма четко подтверждена и система не выдает никаких ошибок, я даже могу вывести имя файла из представления с помощью print(request.FILES):
Но по какой-то причине файлы не загружаются в папку media/project_files. Почему?