Динамически меняйте максимальные файлы Dropzone - PullRequest
Новая
       83

Динамически меняйте максимальные файлы Dropzone

2 голосов
/ 17 октября 2019

Я пытаюсь динамически обновлять свойство MaxFiles каждый раз, когда новое изображение загружается / удаляется. Используя следующий код, вы не разрешаете загружать любое изображение вместо того, чтобы ограничивать его до maxFiles. И это не принимает значение переменной maxFile, но когда я удаляю переменную maxFile и ставлю число, то это работает нормально. получил идею исходного кода из этого Ответ . 

!function ($) {
"use strict";
var Onyx = Onyx || {};


Onyx = {
    init: function() {
        var self = this,
            obj;

        for (obj in self) {
            if ( self.hasOwnProperty(obj)) {
                var _method =  self[obj];
                if ( _method.selector !== undefined && _method.init !== undefined ) {
                    if ( $(_method.selector).length > 0 ) {
                        _method.init();
                    }
                }
            }
        }
    },

    userFilesDropzone: {
        selector: 'form.dropzone',
        init: function() {
            var base = this,
                container = $(base.selector);

            base.initFileUploader(base, 'form.dropzone');
        },
        initFileUploader: function(base, target) {

            var maxFile = $('.dropzone').attr('data-count');

            var onyxDropzone = new Dropzone(target, {
                url: ($(target).attr("action")) ? $(target).attr("action") : "data.php", // Check that our form has an action attr and if not, set one here
                maxFiles: maxFile, 
                maxFilesize: 5,
                acceptedFiles: ".JPG,.PNG,.JPEG",
            //  previewTemplate: previewTemplate,
            //  previewsContainer: "#previews",
                clickable: true,
                uploadMultiple: false,

            });

            onyxDropzone.on("success", function(file, response) {
                let parsedResponse = JSON.parse(response);
                file.upload_ticket = parsedResponse.file_link;
                var imagecount = $('.dropzone').attr('data-count');
                    imagecount = imagecount - 1;
                    $('.dropzone').attr('data-count', imagecount);
            });
        },
    }
  }
}// JavaScript Document

function openImagePopup(id = null) {
   $(".upload-images").show();
    $.ajax({
        url: 'fetch.php',
        type: 'post',
        data: {id: id},
        dataType: 'json',
        success:function(response) {
            var imagecount = response.counts;
            $('.dropzone').attr('data-count', imagecount);
    }
 });
}

HTML 

<form action="data.php" class="dropzone files-container" data-count="">
   <div class="fallback">
       <input name="file" type="file" multiple />
   </div>
   <input type="hidden" id="imageId" name="imageId">
</form>

1 Ответ

1 голос
/ 24 октября 2019

ОБНОВЛЕННЫЙ ОТВЕТ

После создания плагина Dropzone будет с теми же параметрами , если вы не измените внутренние параметры экземпляра непосредственно .

Чтобы изменить параметры Dropzone, вы можете сделать это с помощью следующей строки: 

$('.dropzone')[0].dropzone.options.maxFiles = newValue;

$('.dropzone')[0] возвращает первый DOM-элемент Dropzone

.dropzone.options returnосновные параметры экземпляра плагина в Dropzone. Теперь вы можете изменить любые параметры непосредственно для этого объекта.

В вашем случае вам придется изменить функцию, которая запускает всплывающее окно, как следовать 

function openImagePopup(id = null) {
   $(".upload-images").show();
    $.ajax({
        url: 'fetch.php',
        type: 'post',
        data: {id: id},
        dataType: 'json',
        success:function(response) {
            var imagecount = response.counts;
            $('.dropzone')[0].dropzone.options.maxFiles = imagecount;
    }
 });
}

И изменить событие dropzone onSuccess, какthis: 

onyxDropzone.on("success", function(file, response) {
    let parsedResponse = JSON.parse(response);
    file.upload_ticket = parsedResponse.file_link;
    var imagecount = $('.dropzone')[0].dropzone.options.maxFiles - 1;
    $('.dropzone')[0].dropzone.options.maxFiles = imagecount;
});

Как видите, вы также можете удалить атрибут data-count = "" вашего элемента и повторно использовать значение из экземпляра плагина options.maxFiles

...