Programmatically Add Existing File to Dropzone

dropzone remove file
dropzone multiple files
dropzone add file from url
dropzone js alternative
dropzone processqueue
dropzone maxfilesize
how to display existing files on server in dropzone js using php
ngx-dropzone-wrapper

I'm trying to add an existing image to my dropzone programmatically, using the dropzone.js FAQ as a guide:

// Add the existing image if it's there.
// headerDropzone is my dropzone (debug shows it as existing and initialized at this point.
var on_load_header = $( '[name="on_load_header_image"]' ).val();
var on_load_header_path = $( '[name="on_load_header_image_path"]' ).val();

if ( on_load_header ) {

    // Hardcoded size value is just for testing, see my second question below.
    var on_load_header_data = { name: on_load_header, size: 12345 };

    // Call the default addedfile event handler
    headerDropzone.options.addedfile.call( headerDropzone, on_load_header_data );

    // And optionally show the thumbnail of the file:
    headerDropzone.options. thumbnail.call( headerDropzone, on_load_header_data, on_load_header_path);

}

My first problem is that this is just not working. The addedfile event doesn't fire (or at least the addedfile handler in headerDropzone never fires), same goes for thumbnail.

My second problem/question is: do I have to provide the file size? I could get it server side, but I'd rather not do it if I don't actually need to.

See if the functions headerDropzone.options.addedfile and headerDropzone.options.thumbnail are actually defined. It should work the way you did it, but without further info it's difficult to tell what's wrong.

About the filesize: No, it's not necessary to actually provide the accurate filesize. It's just that Dropzone automatically displays the filesize. If you don't care if some false filesize is displayed then you can just provide some random number or 0. Otherwise you might want to hide the filesize with CSS, or with JS after you add it. (The element in question has the class dz-size.

The JavaScript version of it would look something like this:

var fileSizeElement = on_load_header_data.previewElement.querySelector(".dz-size");
fileSizeElement.parentNode.removeChild(fileSizeElement);

Programmatically Add Existing File to Dropzone, I'm trying to add an existing image to my dropzone programmatically, using the dropzone.js FAQ as a guide: // Add the existing image if it's there. For implementing it you only need to add the dropzone library and add dropzone class to <form> that’s it. Use PHP to store the file to the server. It supported by – Chrome 7+ Firefox 4+ IE 10+ Opera 12+ (Version 12 for MacOS is disabled because their API is buggy) Safari 6+ If you found this tutorial helpful then don't forget to share.

If you need to add multiple existing files into Dropzone, declare your existing files as array and then add it into Dropzone programmatically inside a loop like so...

        Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone("#myDropzone", {
            url: "/file/post",
            maxFileSize: 50,
            acceptedFiles: ".pdf",
            addRemoveLinks: true,
            //more dropzone options here
        });

        //Add existing files into dropzone
        var existingFiles = [
            { name: "Filename 1.pdf", size: 12345678 },
            { name: "Filename 2.pdf", size: 12345678 },
            { name: "Filename 3.pdf", size: 12345678 },
            { name: "Filename 4.pdf", size: 12345678 },
            { name: "Filename 5.pdf", size: 12345678 }
        ];

        for (i = 0; i < existingFiles.length; i++) {
            myDropzone.emit("addedfile", existingFiles[i]);
            //myDropzone.emit("thumbnail", existingFiles[i], "/image/url");
            myDropzone.emit("complete", existingFiles[i]);                
        }

dropzone.js Programmatically Add Existing File to Dropzone?, js Programmatically Add Existing File to Dropzone? Dropzone.options.​MyDropZoneID = { init: function () { var mockFile = { name: fileName, size  Send AJAX POST request from init function to get all the files list. On successfully callback loop on the response and assign { name: value.name, size: value.size } in mockFile. Use Dropzone addedfile and thumbnail functions to add the existing file to upload area. With complete function remove progress bar.

Programmatically add existing file to dropzone · Issue #577 · react , is the current behavior? I can't add existing files to Dropzone according to the FAQ. Show me myDropzone.emit is not a function What is the In this tutorial, we will show you how to display existing files on the server when using DropzoneJS and Go. This tutorial is based on How to build a file upload form using DropzoneJS and Go. Make…

Originally I was doing something along these lines to programmatically upload a pre-existing file to Dropzone:

headerDropzone.emit("addedfile", imageFile);                                
headerDropzone.emit("thumbnail", imageFile, imageUrl);
headerDropzone.files.push(file);

However, referencing this Dropzone Github Issue I found an easier way to directly upload:

headerDropzone.uploadFiles([imageFile])

Unfortunately there are no references to this uploadFiles method in the Dropzone Documentation, so I figured I'd share some knowledge with all you Dropzone users.

Hope this helps someone

Dropzone.js, DropzoneJS is an open source library that provides drag'n'drop file uploads with a file upload form using DropzoneJS and Go · How to display existing files on server to pass an options object when instantiating a dropzone programmatically like in the If false, files added to the dropzone will not be queued by default. If false, files added to the dropzone will not be queued by default. You'll have to call enqueueFile(file) manually. addRemoveLinks default: false: If true, this will add a link to every file preview to remove or cancel (if already uploading) the file.

This is now answered in official FAQ

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");
// Or if the file on your server is not yet in the right
// size, you can let Dropzone download and resize it
// callback and crossOrigin are optional.
myDropzone.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin);

// Make sure that there is no progress bar, etc...
myDropzone.emit("complete", mockFile);

// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
var existingFileCount = 1; // The number of files already uploaded
myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;

How to display existing files on server using DropzoneJS and Go , In this tutorial, we will show you how to display existing files on the server So we need to add a piece of code to retrieve stored files' information (name put existing files to Dropzone upload area and generate its thumbnail. if you used dropzone js for document upload like images or files then you might be need to show also existing uploaded files from database using php mysql. so, in this example, i write small script to display all the uploaded files from upload folder and you can easily upload mode using dropzone js.

Programmatically upload / add file via Dropzone e.g. by Selenium , (To clarify - I am trying to upload a <strong>new</strong> file, not to show an existing file as mentioned in the Dropzone FAQ). Answer1: Click to  As you can see, there is a variable that will be used to enforce a maximum file size of 5 MB, The dropClass variable will be used to programmatically add a class to the dropzone container when the user is dragging a file over the dropzone but has not yet released the mouse button. In addition, there are boolean flags that will be triggered in

How to Build a File Upload Form with Express and DropzoneJS , DropzoneJS allows users to upload files using drag and drop. Whilst the usability You can initialize it simply by adding the dropzone class. For example: You can also create an instance programmatically: const uploader  Retrieve files details from the new “/uploads” via ajax. Create mockFile using values from server. mockFile is simply JavaScript objects with properties of name and size. Then we call Dropzone’s addedfile and thumbnail functions explicitly to put existing files to Dropzone upload area and generate its thumbnail.

How to Display existing files on Server in Dropzone - PHP, To recreate the thumbnails after page refresh needs to send AJAX request to get all files list for adding thumbnails while initializing Dropzone. In  How to Build a File Upload Form with Express and DropzoneJS. By You can initialize it simply by adding the dropzone class. For example: Take a look at the dropzone.css file for reference.

Comments
  • Thanks so much for your answer. I went with a different approach that was a better fit for my particular application. Thanks for dropzone, btw, it's a pleasure to work with.
  • Thank you, great to hear.
  • Note, code as changed in dropzone and we need to replace myDropzone.options.addedFile.call(myDropzone, mockFile) for myDropzone.emit("addedfile", mockFile). See example in the updated faq
  • Thanks, this helped me added existing files to my drop zones.
  • is there any way to remove those files, which i had added programatically ??
  • @MayankMajithya, Refer to this line addRemoveLinks: true,. And please post a new question if you need further clarification.
  • When I try to use uploadFiles([file]) with chunking I get an error: "Uncaught TypeError: Cannot read property 'chunked' of undefined"
  • Same with me @Lokiare. any update on this @Cumulo.?
  • This one works with the new chunked upload feature. Although you can just use myDropZone.handleFiles([file]);
  • Using this code, I have managed to add existing images to dropzone. But, when I want to resubmit the form (with the dropzone images), the images are not recognized (dzObj.getUploadingFiles().length === 0 && dzObj.getQueuedFiles().length === 0) and so it didn't work. Any solution to this problem? Thanks.
  • This is the only example that works with latest version. Internet is full of incorrect answers.. Accepted answer should be updated to this. Also dropzone.js what is this nightmare of adding an image? Expecting addImage() function...
  • gitlab.com/meno/dropzone/-/wikis/…