Dropzone js data for addFile() method

Question

I can't figure out - what data should be passed to Dropzone.addFile() to add already uploaded file to dropzone list.

now I have:

$.each(attachments[drop.data('name')], function (index, item) {
    let mock = {
        name: item.original_name,
        size: item.size,
        dataUrl: item.relative_url,
        type: item.mime_type
    };
    drop[0].dropzone.addFile(mock);
});

and have following errors:

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
at Dropzone.createThumbnail (dropzone-amd-module.js:2025)
at Dropzone._processThumbnailQueue (dropzone-amd-module.js:1922)
at dropzone-amd-module.js:1907

Uncaught TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'.
at Dropzone._uploadData (dropzone-amd-module.js:2514)
at dropzone-amd-module.js:2381
at dropzone-amd-module.js:2535
at Dropzone.transformFile (dropzone-amd-module.js:689)
at _loop (dropzone-amd-module.js:2532)
at Dropzone._transformFiles (dropzone-amd-module.js:2541)
at Dropzone.uploadFiles (dropzone-amd-module.js:2293)
at Dropzone.processFiles (dropzone-amd-module.js:2198)
at Dropzone.processFile (dropzone-amd-module.js:2166)
at Dropzone.processQueue (dropzone-amd-module.js:2155)

What I missed in my mock array to make this thing work propertly?

@AabirHussain Yep, but in different maner, I also made a lot of support logic to recognize newly added files and availability to delete already uploaded files. — Oleg Shakhov, Jan 11 '20 at 11:48

score 5 · Accepted Answer · answered Jan 09 '20 at 06:33

I have used some code to show previously uploaded images. I hope this could help you.

/**
 * Display images, modify this function according to your needs
 */
function displayOldImage() {
 const data = JSON.parse($('#oldImages').val());
 let myDropzone = this;
 $.each(data, function (key, value) {
    const mockFile = {name: value.name, size: value.size};
    myDropzone.files[key] = value.name;
    myDropzone.options.addedfile.call(myDropzone, mockFile);
    myDropzone.options.thumbnail.call(myDropzone, mockFile, value.url);
       mockFile.previewElement.classList.add('dz-success');
       mockFile.previewElement.classList.add('dz-complete');
    });
 }

var dropzoneUploader = new Dropzone("div#dropzone-file-input", {
     url: JS_BASE_URL + 'gallery/photo/add-file',
     parallelUploads: 10,
     addRemoveLinks: true,
     maxFiles: 25,
     maxFilesize: 2,
     dictDefaultMessage: message,
     acceptedFiles: 'image/jpeg, image/jpg, image/png',
     preventDuplicates: true,
     init: displayOldImage, //here is the function call for your requirements
 });

score -1 · Answer 2 · answered Jan 02 '20 at 10:16

-1

From the Github project, you can see the addFile implementation: https://github.com/enyo/dropzone/blob/08b9e0a763b54a685404dea523a9c54242fbe1b9/dist/dropzone.js#L1812

It doesn't give any documentation but if you check inside this function they are using predefined properties (specifically the size property) that make me think of the Blob javascript object: https://developer.mozilla.org/en-US/docs/Web/API/Blob

EDIT: The error is also suggesting you using the Blob type so the prediction was correct hahaha

EDIT2: The File Javascript object is inheriting from the Blob one, so you may also use the File type

answered Jan 02 '20 at 10:16

Mehdi Benmoha

3,694
3
23
43

A can't do this anyway, I made what I want with another approach. – Oleg Shakhov Jan 02 '20 at 15:32
Check this before downvoting: https://stackoverflow.com/questions/24488985/how-to-mock-file-in-javascript – Mehdi Benmoha Jan 02 '20 at 16:30
@OlegShakhov Then post it as an aswer here for the community ? – Mehdi Benmoha Jan 06 '20 at 05:34

Dropzone js data for addFile() method

2 Answers2