Refresh the list of files in Dropzone


#1

Hi,
I have small problem with Dropzonejs.

I have this code:


<script type="text/javascript">
    Dropzone.options.dpzMultipleFiles = {
        dictDefaultMessage: "Przeciągnij pliki aby dodać",
        uploadMultiple: true,
        paramName: "file",
        maxFilesize: 50,
        maxFiles: 15,
        createImageThumbnails: true,
        acceptedFiles: ".png,.jpg,.jpeg",
        clickable: true,
        thumbnailWidth: 200,
        thumbnailHeight: 200,
        autoProcessQueue: true,

        init: function () {
            dpzMultipleFiles = this;
            $.ajax({
                url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/ShowFiles',
                type: 'get',
                dataType: 'json',
                cache: false,
                success: function (response) {
                    $.each(response, function (key, value) {
                        dpzMultipleFiles.options.maxFiles = dpzMultipleFiles.options.maxFiles - 1;
                        var mockFile = {name: value.name, size: value.size}

                        dpzMultipleFiles.emit('addedfile', mockFile)
                        dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
                        dpzMultipleFiles.emit('complete', mockFile)
                    })
                },
                error: function (response) {
                    alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
                }
            });


            this.on('completemultiple', function (file, json) {
                //$('.sortable').sortable('enable');
            });
            this.on("thumbnail", function (file, dataUrl) {
                $('.dz-image').last().find('img').attr({width: '100%', height: '100%'});
            }),


                this.on('success', function (file, json) {
                    if (file.accepted == true) {

                        $('.dz-preview').remove();
                        this.removeAllFiles;
                    }
                });
            this.on('successmultiple', function () {
                $('.dz-preview').remove()
                $.ajax({
                    url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/ShowFiles',
                    type: 'get',
                    dataType: 'json',
                    cache: false,
                    success: function (response) {
                        $.each(response, function (key, value) {
                            var mockFile = {name: value.name, size: value.size}
                            dpzMultipleFiles.emit('addedfile', mockFile)
                            dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
                            dpzMultipleFiles.emit('complete', mockFile)
                        });
                    }
                    ,
                    error: function (response) {
                        alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
                    }
                });
            })
            this.on("addedfile", function (file) {
                var removeButton = Dropzone.createElement("<button class='remove_file_dropzone'> Skasuj plik </button>");
                removeButton.addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();

                    $.ajax({
                        url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/RemoveFile/' + file.name,
                        dataType: 'text',
                        type: 'post',
                        cache: false,
                        data: $(this).serialize(),
                        success: function (data, textStatus, jQxhr) {
                            x = confirm('Czy napewno chcesz skasować ten plik?');
                            if (!x) return false;
                            dpzMultipleFiles.options.maxFiles = dpzMultipleFiles.options.maxFiles + 1;
                            $('.dz-preview').remove();
                            this.removeAllFiles;
                            $.ajax({
                                url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/ShowFiles',
                                type: 'get',
                                dataType: 'json',
                                cache: false,
                                success: function (response) {
                                    $.each(response, function (key, value) {
                                        var mockFile = {name: value.name, size: value.size}
                                        dpzMultipleFiles.emit('addedfile', mockFile)
                                        dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
                                        dpzMultipleFiles.emit('complete', mockFile)
                                    });
                                }
                                ,
                                error: function (response) {
                                    alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
                                }
                            });
                        }, error: function (jqXhr, textStatus, errorThrown) {
                            alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
                        }
                    });
                });
                file.previewElement.appendChild(removeButton);
            });
            this.on("maxfilesexceeded", function (file) {
                this.removeFile(file);
            });
            this.on('resetFiles', function () {
                dpzMultipleFiles.removeAllFiles();
            });
            this.on('queuecomplete', function () {
                //$('.dz-preview').remove();
            });
            this.on('drop', function () {

            });
            this.on('complete', function () {
            });
        }
    };


    $(function () {
        $(".dropzone").sortable({
            items: '.dz-preview',
            cursor: 'move',
            opacity: 0.5,
            containment: '.dropzone',
            distance: 20,
            tolerance: 'pointer',
            update: function (event, ui) {
                $(".dz-filename span").each(function (index) {
                    $.ajax({
                        url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/ChangeFileOrder/' + $(this).text() + "/" + index,
                        dataType: 'text',
                        type: 'post',
                        cache: false,
                        data: $(this).serialize(),
                        success: function (data, textStatus, jQxhr) {

                        }, error: function (jqXhr, textStatus, errorThrown) {
                            alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
                        }
                    });
                });
            }
        });
    });
</script>

The script works correctly 100% :slight_smile:
The only problem is to refresh files. The list of files refreshes me before the 100% completion of the upload.

I would like the list of files to be refreshed after a complete uploadzie of all files - not before.

Does anyone know how to improve my code?


#2

What do you mean by “refresh” after the content loads? What is happening when it refreshes?


#3

Ok, I’m explaining.
For example, I’m uploading 10 files in dropzone.
At the moment it looks like this:
After uploading the first files, the list is updated (all files are hidden) and they become visible only after the upload is finished.
There is no effect of uploading individual files in sequence. It looks like the script has stopped working (it has loaded, for example, 2 files and everything disappears).

As I would like to refresh the list of files after downloading the last file (10/10).


#4

this video shows my problem: https://youtu.be/pITxa4WkCAw


#5

Instead of selecting all of the files at once, if you drag-drop them one at a time does that work?


#6

Uploading all files at once works ok. The problem is only with the same refreshing. The files disappear (like on the video) and show up after a complete upload. I have probably the wrong place in the code that REMOVEFILES inserted: /