Как добавить всплывающий вопрос перед отправкой файлов dropzone?

Question

Я использую Dropzone для загрузки нескольких файлов. Когда файл перетаскивается, я хочу добавить всплывающее окно, задать вопрос с конкретными расширениями файлов, а затем передать этот параметр. в настоящее время, несмотря на то, что появившееся всплывающее окно загружает файл до этого, поэтому ' formData.append("convert", $('#convertFile').val()); " это значение не придет правильно. пожалуйста посоветуй?

Dropzone.autoDiscover = false;
     new Dropzone(document.body, {
        url: "/upload/",
        parallelUploads: 1,
        clickable: "#fileUpload",
         init: function () {
             var drop = this;
             this.on('error', function (file, errorMessage) {

             });
         },
         accept: function(file, done) {
             var ext = file.name.split('.').pop().toLowerCase();
             if ($.inArray(ext, ['mov', 'wmv']) !== -1) {
                 swal({
                     title: 'Convert ',
                     html: "Do you want to convert this media ?" +
                     "<br>" +
                     '<button type="button" role="button" tabindex="0" id="convertUpload">' + 'Convert' + '</button>' +
                     '<button type="button" role="button" tabindex="0"  id="rawUpload">' + 'Do not convert' + '</button>',

                 }).catch(swal.noop);
                 $(document).on('click', '#convertUpload', function() {
                     $('#sidebar #upload #convertFile').val(1);
                     swal.clickConfirm();
                 });

                 $(document).on('click', '#rawUpload', function() {
                     $('#sidebar #upload #convertFile').val(0);
                     swal.clickConfirm();

                 });
             }
             done();
         },
         sending: function(file, xhr, formData) {
             formData.append("convert", $('#convertFile').val());
         },

Answer 1

После того, как вы определите (из пользовательского ввода), должен ли файл быть преобразован, вы можете добавить свойство непосредственно к объекту файла.

file.convertFile = 1; или же file.convertFile = 0;

Позже в вашем коде вы можете легко получить к нему доступ в любое время, когда работаете с этим объектом. Вам не нужно передавать значение как параметр функции, оно будет сохранено в его владельце, объекте file!

Пример:

<style>
    #fileUpload {
        margin: 20px; 
        height: 200px; 
        width: 200px; 
        border: 2px dotted green; 
    }
</style>

<div id="fileUpload"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.dropzonejs.com/js/dropzone.js"></script>

<script>
    Dropzone.autoDiscover = false;
    const dropzone_fileUpload = new Dropzone('#fileUpload', {
        url: "/upload/",
        parallelUploads: 1,
        accept: function(file, done){
            const extension = file.name.split('.').pop().toLowerCase();
            const can_be_converted = ['mov','wmv','html','jpg'].includes(extension); // returns true if array "includes" extension

            if (can_be_converted) {
                const userAgreesToConvert = confirm('Would you like to convert this .'+ extension +' file?'); // return true if they accept
                file.convertFile = userAgreesToConvert ? 1 : 0; // add property to file object
            }

            done(); 
        },
        sending: function(file, xhr, formData) {
            // here, we have access to the file and it's new property, "convertFile"
            if (file.convertFile !== undefined){
                console.log(`${file.convertFile ? 'CONVERT FILE:' : 'DO NOT CONVERT FILE:'} ${file.name}`); 
            } else {
                console.log(`Dont care about ${file.name}`);
            }
        }
    });
</script>

ДЕМО (JS Fiddle)

Примечание: я добавил дополнительные типы расширений для тестирования, у меня нет wmv файлы быстро доступны. Кроме того, я удалил большинство ненужного кода, чтобы сохранить ответ для краткого и конкретного. Я не пользовалась swal() либо из-за того, что я не хотел загружать их библиотеку, я не мог найти их CDN, и в любом случае это не имеет отношения к проблеме.

Пожалуйста, просмотрите пример и приложите все усилия, чтобы применить методы здесь к вашему собственному коду. Скорее всего, это не решение для копирования и вставки, но я обещаю, что вы узнаете больше, если приложите немало усилий, чтобы заставить его работать.

Удачи!!