Adding a list of files to the array and displaying them in the component

Hi,
I have a big problem with JS.
I would like to add to my dropzona component a list of files on the server.

I have this code:


<div class="row">
    <div class="col-12">
        <form class="dropzone" id="dpz-multiple-files" action="http://localhost/dropZoneUpload.php"
              method="post" enctype="multipart/form-data" style="border:1px solid #000;">

        </form>
        <br>
        <center>
            <button id="submit-all" style="height: 40px;"> Upload All the files</button>
        </center>
    </div>
</div>

function getValueFromJson() {
            let res = $.ajax({
                url: 'http://localhost/dropZoneUpload.php?parm=1',
                type: 'get',
                dataType: 'json',
                success: function (response) {
                    return response;
                }
            })
            return res;
        }

The php file returns the result:


[{"name":"index.html","size":0,"path":"..\/assets\/uploads\/index.html"},{"name":".DS_Store","size":8196,"path":"..\/assets\/uploads\/.DS_Store"},{"name":"q1.jpg","size":433382,"path":"..\/assets\/uploads\/q1.jpg"},{"name":"bla.jpg","size":193540,"path":"..\/assets\/uploads\/bla.jpg"},{"name":".htaccess","size":106,"path":"..\/assets\/uploads\/.htaccess"}]

In this way I define the truncated JS:


Dropzone.options.dpzMultipleFiles = {
            uploadMultiple: true,
            paramName: "file",
            maxFilesize: 100,
            maxFiles: 2,
            createImageThumbnails: true,
            acceptedFiles: ".png,.jpg,.jpeg",
            clickable: true,
            thumbnailWidth: 150,
            thumbnailHeight: 150,
            autoProcessQueue: false,


            init: function () {
                var submitButton = document.querySelector("#submit-all")
                dpzMultipleFiles = this;
                submitButton.addEventListener("click", function () {
                    dpzMultipleFiles.processQueue();
                });
                this.on('completemultiple', function (file, json) {
                    $('.sortable').sortable('enable');
                });
                this.on('success', function (file, json) {
                    let val = file.accepted;
                    if (file.accepted == true) {
                        //alert ('JSON - wgrałem!');
                        console.log(json);
                        $('.main_form').append("<input type='text' name='imgFiles[]' value='" + file.name + "'/>");
                    }
                    let val1 = file.name;
                });
                this.on("addedfile", function (file) {
                    var removeButton = Dropzone.createElement("<button> Remove file </button>");
                    // Capture the Dropzone instance as closure.
                    var _this = this;

                    //console.log(file);
                    removeButton.addEventListener("click", function (e) {
                        // Make sure the button click doesn't submit the form:
                        e.preventDefault();
                        e.stopPropagation();

                        // Remove the file preview.
                        _this.removeFile(file);
                        // If you want to the delete the file on the server as well,
                        // you can do the AJAX request here.
                        console.log("kasuje" + file.name);
                        console.log(file);
                    });
                    file.previewElement.appendChild(removeButton);
                });
                this.on('drop', function (file) {
                    console.log('File', file);
                    alert('bb');
                });
                this.on("maxfilesexceeded", function (file) {
                    this.removeFile(file);
                });
            }
        };


        $(function () {
            $(".dropzone").sortable({
                items: '.dz-preview',
                cursor: 'move',
                opacity: 0.5,
                containment: '.dropzone',
                distance: 20,
                tolerance: 'pointer'
            });
        });

How can I display a list of my files in DropZoneJS (downloaded from PHP)?

I found an example on the Internet:


$(".dropzone").dropzone({
  init: function() { 
    myDropzone = this;
    $.ajax({
      url: 'upload.php',
      type: 'post',
      data: {request: 2},
      dataType: 'json',
      success: function(response){

        $.each(response, function(key,value) {
          var mockFile = { name: value.name, size: value.size };

          myDropzone.emit("addedfile", mockFile);
          myDropzone.emit("thumbnail", mockFile, value.path);
          myDropzone.emit("complete", mockFile);

        });

      }
    });
  }
});

But I do not know how to adapt it in my code. :frowning:

Can I ask for help?
Does anyone know how to do it?

Hi @trifek, you really just need to copy/paste the $.ajax() call into your own init method, adjust the url and type, and replace myDropzone with dpzMultipleFiles.

Could you show me how to do it? I would be extremely grateful

Sure… mutatis mutandis:

Dropzone.options.dpzMultipleFiles = {
  uploadMultiple: true,

  // Other options...

  init: function () {
    var dpzMultipleFiles = this

    // Add your event listeners...

    // Make that initial AJAX call and emit events from the response
    $.ajax({
      url: 'http://localhost/dropZoneUpload.php?parm=1',
      type: 'get',
      dataType: 'json',
      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)
        })
      }
    })
  }
}

OK, I have this code:


Dropzone.options.dpzMultipleFiles = {
        // Prevents Dropzone from uploading dropped files immediately
        uploadMultiple: true,
        paramName: "file",
        maxFilesize: 100,
        maxFiles: 2,
        createImageThumbnails: true,
        acceptedFiles: ".png,.jpg,.jpeg",
        clickable: true,
        thumbnailWidth: 150,
        thumbnailHeight: 150,
        autoProcessQueue: false,
        init: function () {
            $.ajax({
                url: 'http://localhost/dropZoneUpload.php?parm=1',
                type: 'get',
                dataType: 'json',
                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)
                    })
                }
            });



            var submitButton = document.querySelector("#submit-all")
            dpzMultipleFiles = this;
            submitButton.addEventListener("click", function () {
                dpzMultipleFiles.processQueue();
            });
            // to handle the added file event
            this.on('completemultiple', function (file, json) {
                $('.sortable').sortable('enable');
            });
            this.on('success', function (file, json) {
                let val = file.accepted;
                if (file.accepted == true) {
                    alert ('JSON - wgrałem!');
                    console.log(json);
                    $('.main_form').append("<input type='text' name='imgFiles[]' value='" + file.name + "'/>");
                }
                let val1 = file.name;
                //alert(val1);
            });
            this.on("addedfile", function (file) {
                var removeButton = Dropzone.createElement("<button> Remove file </button>");
                // Capture the Dropzone instance as closure.
                var _this = this;

                //console.log(file);
                removeButton.addEventListener("click", function (e) {
                    // Make sure the button click doesn't submit the form:
                    e.preventDefault();
                    e.stopPropagation();

                    // Remove the file preview.
                    _this.removeFile(file);
                    // If you want to the delete the file on the server as well,
                    // you can do the AJAX request here.
                    console.log("kasuje" + file.name);
                    console.log(file);
                });
                file.previewElement.appendChild(removeButton);
            });
            this.on('drop', function (file) {
                console.log('File', file);
                alert('drop file');
            });
            this.on("maxfilesexceeded", function (file) {
                this.removeFile(file);
            });
        }
    };
    $(function () {
        $(".dropzone").sortable({
            items: '.dz-preview',
            cursor: 'move',
            opacity: 0.5,
            containment: '.dropzone',
            distance: 20,
            tolerance: 'pointer'
        });
    });

and it’s working!! Thank you very much!! :slight_smile:

Could I have any more question in this topic?

I have a sortable component attached to this script.

How can I save the order of files in the database?

Well I can’t get the sorting functionality to work with your code in the first place… is this the plugin you’re using?

http://johnny.github.io/jquery-sortable/

Anyway I’m not really familiar with either library you’re using (besides jQuery), but I generally doubt that any additional drag and drop behaviour will work reliably without interfering with dropzone itself. Can you provide a link or fiddle where this is working?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.