Как загрузить несколько файлов с uploadcare - PullRequest
Новая
       53

Как загрузить несколько файлов с uploadcare

0 голосов
/ 03 октября 2018

Я пытаюсь реализовать Uploadcare для загрузки нескольких изображений, но запутался в структуре кода.Код ниже работает, но он имеет два блока .fail и два блока .done.Кроме того, добавление изображений во внешний интерфейс с помощью $.each() должно выполняться после сохранения группы на сервере, в то время как этот код выполняется одновременно.

Как можно улучшить этот код? 

$('button').on('click', function() {

    var myDialog = uploadcare.openDialog(null, {
        imagesOnly: true, multiple: true, multipleMin: 1, multipleMax: 7
    });

    myDialog.fail(function(error, fileInfo) {
        alert('Upload fialed');
    });

    myDialog.done(

        groupInstance => {  
            var groupPromise = groupInstance.promise();
            var arrayOfFiles = groupInstance.files();

            groupPromise.done(function(fileGroupInfo) {
                /* Save group to server using Ajax */
                uploadGroup(fileGroupInfo.uuid);
            });

            groupPromise.fail(function(error, fileGroupInfo) {
                alert('Upload failed');
            });

            $.each(arrayOfFiles, function(i, file) {
                file.done(function(fileInfo) {
                    /* Add image to front-end */
                });
            });
        });

       return false;
    });

И функция AJAX: 

uploadGroup = function(imgurl) {        
    $.post('index.php',
    {string:imgurl},
    function(data) {
        if(data.status=='success') {
            alert('success');
        }
        else {
            alert('error');
        }
    },'json');
};

Также запутался в обозначении groupInstance =>.

1 Ответ

0 голосов
/ 03 октября 2018

Кажется, arrayOfFiles - это массив обещаний?

Итак, вы ждете, пока все они завершатся, используя $.when

, и так как вы уже используете современный JavaScript, перейдите кдобавьте еще одну «странность», с которой вы, возможно, не знакомы ..., но это облегчает задачу

Возможно, я неправильно понял то, что вы хотели ждать 

   groupInstance => {  
        var groupPromise = groupInstance.promise();
        var arrayOfFiles = groupInstance.files();

        groupPromise.done(function(fileGroupInfo) {
            /* Save group to server using Ajax */
            uploadGroup(fileGroupInfo.uuid);

            // move the .each code here
            $.each(arrayOfFiles, function(i, file) {
                file.done(function(fileInfo) {
                    /* Add image to front-end */
                });
            });

            /* Probably not what you wanted
            $.when(...arrayOfFiles).then((...fileInfos) => {
                $.each(fileInfos, function(i, fileInfo) {
                    // Add image to front-end
                });
            });
            // the above 5 lines in old school JS
            $.when.apply(null, arrayOfFiles).then(function() {
                var fileInfos = [].slice.call(arguments);
                $.each(fileInfos, function(i, fileInfo) {
                    // Add image to front-end
                });
            });
            */
        });

        groupPromise.fail(function(error, fileGroupInfo) {
            alert('Upload failed');
        });
    }

...arayOfFiles ... ... это синтаксис распространения ... так что 

$.when(...arrayOfFiles)

похоже на 

$.when.apply(null, arrayOfFiles)

и function(...fileInfos) равно Синтаксис отдыха 

function(...fileInfos) {

эквивалентен 

function() {
    fileInfos = [].slice.call(arguments);
}

, как

...