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
        });
      }
Вернуться на верх