Upload your existing image files to Dropzone

Question

Upload your existing image files to Dropzone

I have implemented image upload functionality using Dropzonejs in a form. To handle multiple form fields, I have set autoProcessQueue to false and processing it on click of the Submit button as shown below.

Dropzone.options.portfolioForm = { 

    url: "/user/portfolio/save",
    previewsContainer: ".dropzone-previews",
    uploadMultiple: true,
    parallelUploads: 8,
    autoProcessQueue: false,
    autoDiscover: false,
    addRemoveLinks: true,
    maxFiles: 8,

    init: function() {

         var myDropzone = this;
         this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {

             e.preventDefault();
             e.stopPropagation();
             myDropzone.processQueue();
         });
     }
 }

While this functionality works well for uploading images, I also want to display previously uploaded images when the form is edited. I found a helpful resource in the Dropzone Wiki that explains how to show existing files stored on the server: https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

Although this method populates the dropzone-preview area with existing images, it does not include these images in the form submit. I believe this is because the images are not added to the queue. In this case, how can I handle updates on the server side if a user removes an existing image?

Additionally, what would be the preferred approach: adding previously uploaded images to the queue again or simply sending information about the removed file?

javascript ajax forms magento dropzone.js

Answer 1

Answer №1

After struggling to add images for a while, I decided to send information about the deleted images back to the server instead.

When loading existing images into dropzone, I link the image's URL to the mockFile object. In the removedfile event, I add a hidden input to the form if the file being removed is a prepopulated image (which is determined by checking if the file passed into the event has a URL property). Here is the relevant code snippet:

Dropzone.options.imageDropzone = {
    paramName: 'NewImages',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    init: function () {
        var myDropzone = this;

        // Populate any existing thumbnails
        if (thumbnailUrls) {
            for (var i = 0; i < thumbnailUrls.length; i++) {
                var mockFile = { 
                    name: "myimage.jpg", 
                    size: 12345, 
                    type: 'image/jpeg', 
                    status: Dropzone.ADDED, 
                    url: thumbnailUrls[i] 
                };

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

                // And optionally show the thumbnail of the file:
                myDropzone.emit("thumbnail", mockFile, thumbnailUrls[i]);

                myDropzone.files.push(mockFile);
            }
        }

        this.on("removedfile", function (file) {
            // Only files that have been programmatically added should
            // have a URL property.
            if (file.url && file.url.trim().length > 0) {
                $("<input type='hidden'>").attr({
                    id: 'DeletedImageUrls',
                    name: 'DeletedImageUrls'
                }).val(file.url).appendTo('#image-form');
            }
        });
    }
});

Server-side code (ASP MVC controller):

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(ViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        foreach (var url in viewModel.DeletedImageUrls)
        {
            // Code to remove the image
        }

        foreach (var image in viewModel.NewImages)
        {
            // Code to add the image
        }
    }
}

Hopefully, this explanation clarifies things.

Answer 2

After struggling to add images for a while, I decided to send information about the deleted images back to the server instead.

When loading existing images into dropzone, I link the image's URL to the mockFile object. In the removedfile event, I add a hidden input to the form if the file being removed is a prepopulated image (which is determined by checking if the file passed into the event has a URL property). Here is the relevant code snippet:

Dropzone.options.imageDropzone = {
    paramName: 'NewImages',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    init: function () {
        var myDropzone = this;

        // Populate any existing thumbnails
        if (thumbnailUrls) {
            for (var i = 0; i < thumbnailUrls.length; i++) {
                var mockFile = { 
                    name: "myimage.jpg", 
                    size: 12345, 
                    type: 'image/jpeg', 
                    status: Dropzone.ADDED, 
                    url: thumbnailUrls[i] 
                };

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

                // And optionally show the thumbnail of the file:
                myDropzone.emit("thumbnail", mockFile, thumbnailUrls[i]);

                myDropzone.files.push(mockFile);
            }
        }

        this.on("removedfile", function (file) {
            // Only files that have been programmatically added should
            // have a URL property.
            if (file.url && file.url.trim().length > 0) {
                $("<input type='hidden'>").attr({
                    id: 'DeletedImageUrls',
                    name: 'DeletedImageUrls'
                }).val(file.url).appendTo('#image-form');
            }
        });
    }
});

Server-side code (ASP MVC controller):

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(ViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        foreach (var url in viewModel.DeletedImageUrls)
        {
            // Code to remove the image
        }

        foreach (var image in viewModel.NewImages)
        {
            // Code to add the image
        }
    }
}

Hopefully, this explanation clarifies things.

Answer 3

Answer №2

Building on the insights shared by Teppic, I discovered that triggering the complete event was necessary in order to remove the progress bar from the preview.

var data = {
    title: info.title,
    size: info.size,
    status: Dropzone.ADDED,
    isValid: true
};
myUploader.emit("itemadded", data);                                
myUploader.emit("thumbnailcreated", data, info.link);
myUploader.emit("processcompleted", data);
myUploader.items.push(data);

Answer 4

Building on the insights shared by Teppic, I discovered that triggering the complete event was necessary in order to remove the progress bar from the preview.

var data = {
    title: info.title,
    size: info.size,
    status: Dropzone.ADDED,
    isValid: true
};
myUploader.emit("itemadded", data);                                
myUploader.emit("thumbnailcreated", data, info.link);
myUploader.emit("processcompleted", data);
myUploader.items.push(data);

Answer 5

Answer №3

You can simply use the function myDropzone.addFile(file)

This code snippet is extracted from the dropzone library, which can be found at https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978

Answer 6

You can simply use the function myDropzone.addFile(file)

This code snippet is extracted from the dropzone library, which can be found at https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978

Answer 7

Answer №4

If you're looking for more information, check out the official FAQ by clicking here.

Answer 8

If you're looking for more information, check out the official FAQ by clicking here.

Answer 9

Answer №5

Utilizing the dropzone's built-in "displayExistingFile" method was the key to solving this problem.

Within your initialization function, follow these steps:

Create a mock file with the following properties: name, size, and dataURL.
Invoke the displayExistingFile function with the mock file as a parameter.

Instead of using 'null', consider providing a callback function to handle the thumbnail load event.

The use of 'anonymous' is necessary for setting the cross-origin property.

Answer 10

Utilizing the dropzone's built-in "displayExistingFile" method was the key to solving this problem.

Within your initialization function, follow these steps:

Create a mock file with the following properties: name, size, and dataURL.
Invoke the displayExistingFile function with the mock file as a parameter.

Instead of using 'null', consider providing a callback function to handle the thumbnail load event.

The use of 'anonymous' is necessary for setting the cross-origin property.

Answer 11

Answer №6

Originally, my intention was to programmatically upload an existing file using the following code:

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

However, after reading through this discussion on Dropzone's Github, I discovered a simpler way to upload directly:

myDropzone.uploadFiles([imageFile])

Surprisingly, the uploadFiles method is not mentioned in the Dropzone Documentation. I wanted to share this insight with other Dropzone users.

Hopefully, this information proves to be helpful to someone.

Answer 12

Originally, my intention was to programmatically upload an existing file using the following code:

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

However, after reading through this discussion on Dropzone's Github, I discovered a simpler way to upload directly:

myDropzone.uploadFiles([imageFile])

Surprisingly, the uploadFiles method is not mentioned in the Dropzone Documentation. I wanted to share this insight with other Dropzone users.

Hopefully, this information proves to be helpful to someone.

Answer 13

Answer №7

If you possess the file's URL, you have the ability to include the file utilizing the addFile function.

fetch("fileUrl")
    .then(response => response.blob())
    .then((blob) => {
        const newFile = new File([blob], "newFileName.jpg", {
            type: blob.type,
        });
        myDropzone.addFile(newFile);
    });

Answer 14

If you possess the file's URL, you have the ability to include the file utilizing the addFile function.

fetch("fileUrl")
    .then(response => response.blob())
    .then((blob) => {
        const newFile = new File([blob], "newFileName.jpg", {
            type: blob.type,
        });
        myDropzone.addFile(newFile);
    });

Answer 15

Answer №8

When the upload files button is clicked, the dropzone will be cleared of all files. You have the option to either clear all files at once using removeAllFiles(), or to delete a specific file by using removeFile(fileName).

Answer 16

When the upload files button is clicked, the dropzone will be cleared of all files. You have the option to either clear all files at once using removeAllFiles(), or to delete a specific file by using removeFile(fileName).

Upload your existing image files to Dropzone

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

vue implementing autoscroll for long lists

Lack of element content in AngularJS unit testing

Converting HTML Javascript to JAVA with the help of Selenium

Transform the character encoding from a non-standard format to UTF-8

"I am eager to showcase the text upon pressing the Enter key, implementing an Immediately Invoked Function Expression

Adding a type declaration to the severity property in React Alert - A guide to Typescript

What is the best way to reference a component from another component in a React application?

Learn how to pull values from a single JsonNode into multiple beans within a Play Framework controller

Prepare yourself for the possibility of receiving a caution while within a try-catch block

Issue with AJAX show/hide causing scrolling to top

An error of type TypeError occurred while attempting to browserify a module in a Node.js environment

Tips on obtaining checkbox value in an AJAX request

Struggling to make dynamically created SVG 'use' elements function properly

What is the code for displaying and concealing the "add to cart" button using PHP

Dealing with an Incorrect Date in JavaScript

What is the process for configuring CORS settings in Azure Blob Storage through the Portal?

Placing the word "repeatedly" in a d3 js tree

What causes a stack trace to be logged alongside a rejected Promise in Node version 7.2.0?

Grid Column with Checkboxes in Kendo UI for Vue

Maximizing the potential of typescript generics in Reactjs functional components