Dropzone.js не размещает файлы в очереди, а только размещает файлы с JavaScript неправильно отформатирован
У меня есть проект Django, который использует Dropzone для загрузки нескольких файлов в проект, созданный пользователем. Все это происходит в рамках одного экземпляра (проект создается одновременно с загрузкой файлов), поэтому я использую autoProcessQueue: false
и запускаю dropzone.processQueue()
после того, как остальные данные формы будут добавлены.
У меня есть неправильно отформатированный файл javascript, который в итоге работает. Файлы размещены, и я могу получить к ним доступ через <MultiValueDict: {'file': [<InMemoryUploadedFile: <img_name>.jpg (image/jpeg)>]}>
. Это " работает", но я не могу загрузить несколько файлов.
Мой правильно отформатированный javascript ничего не возвращает. Когда я бросаю файл в пространство dropzone в html, отображается предварительный просмотр, но файл не загружается. Когда я POST
форму, я получаю это в выводе для dropzone: <MultiValueDict:[]
Почему мой плохой JS частично функционирует, а мой правильный JS не перехватывает ни одной загрузки файла?
ПЛОХО, но работает javascript.js для 1 файла в dropzone
dropzonePreviewNode && (dropzonePreviewNode.id = "", previewTemplate = dropzonePreviewNode.parentNode.innerHTML, dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode), dropzone = new Dropzone(".dropzone", {
headers: {
'X-CSRFToken': csrftoken
},
autoProcessQueue: false,
url: "create",
method: "post",
uploadMultiple: true,
previewTemplate: previewTemplate,
previewsContainer: "#dropzone-preview",
acceptedFiles:'.jpg',
})
dropzone.on('success', dropzone.processQueue.bind(dropzone));
Корректный JS, но не работает - Причины Broken Pipe
:
dropzonePreviewNode && (dropzonePreviewNode.id = "", previewTemplate = dropzonePreviewNode.parentNode.innerHTML, dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode), dropzone = new Dropzone(".dropzone", {
headers: {
'X-CSRFToken': csrftoken
},
autoProcessQueue: false,
url: "create",
method: "post",
uploadMultiple: true,
previewTemplate: previewTemplate,
previewsContainer: "#dropzone-preview",
acceptedFiles:'.jpg',
}));
dropzone.on('success', dropzone.processQueue.bind(dropzone));
html:
view.py (Очень просто, я просто хочу вывести request.FILES
в данный момент, чтобы посмотреть, работает ли dropzone. Удобно сохранять в нужное место)
def apps_projects_create_view(request):
if request.method == "POST":
form = ProjectListAddForm(request.POST, request.FILES or None)
if form.is_valid():
form.save()
print(form.cleaned_data)
print(request.FILES)
models.py
class ProjectList(models.Model):
identifier = models.AutoField(primary_key=True)
logo = models.ImageField(upload_to=project_directory_path, blank=True, null=True)
name = models.CharField(max_length=50)
client = models.ForeignKey('ClientCompany', blank=True, null=True, on_delete=models.CASCADE)
description = RichTextField(default="Please add Project description... ", blank=True)
create_date = models.DateField(auto_now_add=True)
end_date = models.DateField(blank=True, null=True)
due_date = models.DateField(blank=True, null=True)
assignment = models.ManyToManyField(TechnicianUser)
status = models.CharField(max_length=50,choices=PROJECT_STATUS)
priority = models.CharField(max_length=10,choices=PRIORITY, null=True, blank=True)
file = models.FileField(upload_to=project_directory_path, blank=True, null=True)
tag = TaggableManager(blank=True)
Этот StackOverflow Answer от @jmur решил мою проблему:
<script>
Dropzone.autoDiscover = false;
new Dropzone("#create-post",{
clickable: ".dropzone",
url: "{% url 'create_post' request.user.slug %}",
previewsContainer: "#previewsContainer",
paramName: "images",
maxFiles: 10,
maxFilesize: 30,
acceptedFiles: '.png, .jpg, .jpeg',
uploadMultiple: true,
parallelUploads: 20,
autoProcessQueue: false,
init() {
var myDropzone = this;
this.element.querySelector("#submit-all").addEventListener("click", function(e){
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("success", function(file, response) {
window.location.href=JSON.parse(file.xhr.response).url
});
}
});
</script>
Вот что нужно было изменить / включить в мой скрипт
init() {
var myDropzone = this;
this.element.querySelector("#submit-all").addEventListener("click", function(e){
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("success", function(file, response) {
window.location.href=JSON.parse(file.xhr.response).url
});
}