Dropzone.js: ожидание метода processQueue

Я использовал Dropzone.js в прогрессивной форме отправки данных. Чтобы прояснить сценарий, пользователь сначала вводит личные данные, а затем при нажатии next появляется форма dropzone, в которой пользователь загружает файлы.

Я отключил autoProcessQueue, чтобы дождаться, пока пользователь завершит прикрепление всех необходимых файлов, а затем добавляю дополнительные параметры, а также токен авторизации. На этом этапе, когда пользователь щелкает next, я вызываю метод processQueue(), и это приводит к немедленному переходу к следующей форме, пока прикрепленные файлы загружаются в фоновом режиме. Проблема в том, что мне нужно дождаться загрузки файлов, прежде чем перейти на следующую страницу. Например:

var dropZone = new Dropzone ('[vu-dropzone]', {
    ...
    autoProcessQueue = false,
    params: {
        purpose: 'Registration',
        level: 'A'
    },
    headers: {Authorization: this.$store.getters['user/getToken']}
}); 

//submission method 
// what I'm actually doing
submit(){
  this.dropZone.processQueue();
  // go to next route/form
}
//what I'm after 
async submit(){
    await this.dropZone.processQueue();
     // go to next route/form
}

Есть ли способ добиться этого?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 408
1

Ответы 1

Если вы хотите дождаться, пока dropzone загрузит все изображения, прежде чем перейти к следующему экрану, вам, вероятно, следует использовать собственные события success или successmultiple dropzone.

var dropZone = new Dropzone ('[vu-dropzone]', {
    // ...
    autoProcessQueue = false,
    params: {
        purpose: 'Registration',
        level: 'A'
    },
    headers: {Authorization: this.$store.getters['user/getToken']},
    uploadMultiple: true,
    maxFiles: 10,
    parallelUploads: 10,
    init: function() {
        this.on('successmultiple', function(file, response) {
            // Here you can go to next form/route
        }
    }
}); 

Я рекомендую вам установить maxFiles и parallelUploads на одно и то же значение, максимальное количество файлов, которое вы хотите разрешить, таким образом, когда вы вызываете processQueue(), все файлы будут загружены за один запрос.

Другие вопросы по теме