Dropzone getAcceptedFiles() producing [object File] instead of file

Question

I have added the following function in an attempt to try and get an array of file names placed into the drop zone:

function toggleUploadButton() {
    console.log(myDropzone.getAcceptedFiles() + "Accepted Files"); // []
    console.log(myDropzone.getQueuedFiles() + "Queued Files");  // []
    console.log(myDropzone.getRejectedFiles() + "Rejected Files");  // [File] <- same as above
}

However, the output in the console.log produces:

[object File],[object File],

Instead of the filename itself.

Basically what I am trying to do is to get the file information, so that I can send it via a different part of my code via ajax to upload.

Will [object File] carry over all the basic file information for an upload or does it need structured differently?

var myDropzone = new Dropzone("#myDropzone", {
    //$('#myDropzone').dropzone ({
    //Dropzone.options.myDropzone= {
        url: 'php/quoteSendTest.php',
        autoProcessQueue: false,
        paramName: "file",
        uploadMultiple: true,
        parallelUploads: 5,
        maxFiles: 5,
        maxFilesize: 25,
        acceptedFiles: 'image/*',
        addRemoveLinks: true,
        dictFileTooBig: 'File is larger than 25MB',
        init: function() {
            dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

            // for Dropzone to process the queue (instead of default form behavior):
            document.getElementById("submit-all").addEventListener("click", function(e) {
                // Make sure that the form isn't actually being sent.
                console.log("Something should be showing for eventListener");
                //e.preventDefault();
                e.stopPropagation();
                dzClosure.processQueue();
            });

            this.on("addedfile", function(file) {
                /* Maybe display some more file information on your page */
                dragFileName = file.name;
                var dragFileSize = file.size;
                var count = myDropzone.files.length;
                console.log('File added - ' + file.name + ' - Size - ' + file.size);
                //console.log(dragFileName[]);
                console.log(count + " is the length");
                //toggleUploadButton();
                setTimeout(function () {
                    toggleUploadButton();
                }, 10);
            });

            //send all the form data along with the files:
            this.on("sendingmultiple", function(data, xhr, formData) {
                formData.append("firstname", jQuery("#firstname").val());
                formData.append("lastname", jQuery("#lastname").val());
            });
        }
    });
    function toggleUploadButton() {
        console.log(myDropzone.getAcceptedFiles() + "Accepted Files"); // []
        console.log(myDropzone.getQueuedFiles() + "Queued Files");  // []
        console.log(myDropzone.getRejectedFiles() + "Rejected Files");  // [File] <- same as above
    }

score 0 · Answer 1 · answered Apr 03 '21 at 01:17

Try this:

$.map(myDropzone.getAcceptedFiles(), function(file){ return file.name }).join(', ');

Or, format the return with the HTML you want to show the user:

$.map(myDropzone.getAcceptedFiles(), function(file){ return '<span>'+file.name+'</span>' }).join('');

Dropzone getAcceptedFiles() producing [object File] instead of file

1 Answers1