Joywork/js/custom-uploader-complex.js

function fileUploaderSettingsComplex(type = null) {

    // editor save function
    var saveEditedImage = function(item) {
        // if still uploading
        // pend and exit
        if (item.upload && item.upload.status == 'loading')
            return item.editor.isUploadPending = true;

        // if not appended or not uploaded
        if (!item.appended && !item.uploaded)
            return;

        // if no editor
        if (!item.editor || !item.reader.width)
            return;

        // if uploaded
        // resend upload
        if (item.upload && item.upload.resend) {
            item.editor._namee = item.name;
            item.upload.resend();
        }
    };

    // Enable fileuploader plugin
    // Global settings for fileuploader plugin
    var fileuploaderSettingsComplex = {
            extensions: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
            changeInput: ' ',
            theme: 'thumbnails',
            enableApi: true,
            addMore: true,
            fileMaxSize: 9,
            thumbnails: {
                box: '<div class="fileuploader-items">' +
                    '<ul class="fileuploader-items-list">' +
                    '<li class="fileuploader-thumbnails-input"><div class="fileuploader-thumbnails-input-inner"><i class="jw-action-icon-plus"></i></div></li>' +
                    '</ul>' +
                    '</div>',
                item: '<li class="fileuploader-item">' +
                    '<div class="fileuploader-item-inner">' +
                    '<div class="thumbnail-holder">${image}</div>' +
                    '<div class="actions-holder">' +
                    '<a class="fileuploader-action fileuploader-action-sort" title="Изменить порядок"><i class="jw-action-icon-move"></i></a>' +
                    '<a class="fileuploader-action fileuploader-action-remove" title="Удалить"><i class="jw-action-icon-delete"></i></a>' +
                    '<a class="fileuploader-action fileuploader-action-popup" title="Настроить"><i class="jw-action-icon-settings"></i></a>' +
                    '</div>' +
                    '<div class="progress-holder">${progressBar}</div>' +
                    '</div>' +
                    '</li>',
                item2: '<li class="fileuploader-item">' +
                    '<div class="fileuploader-item-inner">' +
                    '<div class="thumbnail-holder">${image}</div>' +
                    '<div class="actions-holder">' +
                    '<a class="fileuploader-action fileuploader-action-sort" title="Изменить порядок"><i class="jw-action-icon-move"></i></a>' +
                    '<a class="fileuploader-action fileuploader-action-remove" title="Удалить"><i class="jw-action-icon-delete"></i></a>' +
                    '</div>' +
                    '</div>' +
                    '</li>',
                startImageRenderer: true,
                canvasImage: false,
                _selectors: {
                    list: '.fileuploader-items-list',
                    item: '.fileuploader-item',
                    start: '.fileuploader-action-start',
                    retry: '.fileuploader-action-retry',
                    remove: '.fileuploader-action-remove',
                    sorter: '.fileuploader-action-sort'
                },
                onItemShow: function(item, listEl) {
                    var plusInput = listEl.find('.fileuploader-thumbnails-input');

                    plusInput.insertAfter(item.html);

                    if (item.format == 'image') {
                        item.html.find('.fileuploader-item-icon').hide();
                    }
                }
            },
            afterRender: function(listEl, parentEl, newInputEl, inputEl) {
                var plusInput = listEl.find('.fileuploader-thumbnails-input'),
                    api = $.fileuploader.getInstance(inputEl.get(0));

                plusInput.on('click', function() {
                    api.open();
                });
            },
            upload: {
                // upload URL {String}
                url: '/ajax/vue_ajax/complex_upload_axios.php',
                data: type == null ? null : { type: type },
                type: 'POST',
                enctype: 'multipart/form-data',
                start: true,
                synchron: true,
                chunk: false,
                onSuccess: function(data, item, listEl, parentEl, newInputEl, inputEl, textStatus, jqXHR) {
                    //todo
                    console.log(data);
                    if (type == 'UTP') {
                        if (typeof complexform == 'object') {
                            complexform.imagesUTP.push(item.reader.src);
                        }
                    }
                    if (type == 'UTP2') {
                        if (typeof complexform == 'object') {
                            complexform.imagesUTP2.push(item.reader.src);
                        }
                    }
                    setTimeout(function() {
                        item.html.find('.progress-holder').remove();
                    }, 400);
                },
                onComplete: function(listEl, parentEl, newInputEl, inputEl, jqXHR, textStatus) {
                    // callback will go here

                }
            },
            dragDrop: {
                container: '.main-photo'
            },
            onRemove: function(item) {
                var id = $('#id_complex').val();
                if (id) {
                    $.ajax({
                        url: '/ajax/markPhotoToDeleteFromSelectelComplex.php',
                        method: "post",
                        data: {
                            "path": item.name,
                            "complexId": id
                        },
                        success: function(data) {

                        }
                    });
                }
            },
            editor: {
                cropper: {
                    showGrid: true
                },
                onSave: function(dataURL, item) {
                    saveEditedImage(item);
                }
            },
            captions: {
                feedback: 'Drag and drop files here',
                feedback2: 'Drag and drop files here',
                drop: 'Drag and drop files here',
                removeConfirmation: "Удалить выбранный файл?",
                errors: {
                    filesLimit: 'Только ${limit} файлов можно загрузить.',
                    filesType: 'Только ${extensions} файлы можно загрузить.',
                    fileSize: 'Превышение допустимого размера файла. Выберите файл размером не более ${fileMaxSize}MB.',
                    fileName: 'Файл с именем ${name} уже выбран.'
                }
            },
            sorter: {
                selectorExclude: null,
                placeholder: '<li class="fileuploader-item fileuploader-sorter-placeholder"><div class="fileuploader-item-inner"></div></li>',
                scrollContainer: window,
                onSort: function(list, listEl, parentEl, newInputEl, inputEl) {
                    var api = $.fileuploader.getInstance(inputEl.get(0)),
                        fileList = api.getFileList(),
                        _list = [];

                    $.each(fileList, function(i, item) {
                        _list.push({
                            name: item.name,
                            index: item.index
                        });
                    });
                }
            }
        }
        // console.log(type);
    if (type == 'UTP') {
        //console.log(type);
        $('input[name="photoComplexUTP"]').fileuploader(fileuploaderSettingsComplex);
    }
    if ('UTP2') {
        $('input[name="photoComplexUTP2"]').fileuploader(fileuploaderSettingsComplex);
    }
    if (type == 'Action') {
        $('.photo_actions').each(function() {

            $(this).find('input[name="photoComplexAction"]').fileuploader(fileuploaderSettingsComplex);
        });
    }

    if (type === null) {
        $('input[name="photoComplex"]').fileuploader(fileuploaderSettingsComplex);
    }
}