How to Display Existing Files on Server in dropzone js using ASP.NET MVC

In the previous post, we learned:

1. How to upload a files using DropZoneJs in ASP.NET MVC File upload in ASP.NET MVC using Dropzone JS and HTML5
2. Limit Number of files upload using Dropzonejs Options – Part 1
3. Removing thumbnails from dropzone js– Part 2

In this article, we will learn how to display existing files on server in dropzone js using ASP.NET MVC.

Implementation

Step 1

Create Attachment Model class under models folder. This class will hold the list of images from the server.

  public class AttachmentsModel
    {
        public long AttachmentID { get; set; }
        public string FileName { get; set; }
        public string Path { get; set; }
    }

Step 2

Create an Action Method that will return the images from the server.

public ActionResult GetAttachments()
{
    //Get the images list from repository
    var attachmentsList =  new List<AttachmentsModel>
    {
        new AttachmentsModel {AttachmentID = 1, 
        FileName = "/images/wallimages/dropzonelayout.png", 
        Path = "/images/wallimages/dropzonelayout.png"},
        new AttachmentsModel {AttachmentID = 1,
        FileName = "/images/wallimages/imageslider-3.png", 
        Path = "/images/wallimages/imageslider-3.png"}
    }.ToList();

    return Json(new { Data = attachmentsList }, JsonRequestBehavior.AllowGet); 
}

Step 3

Call the action method and display the images into the dropzone form. Here, we can use the Dropzone Init() function to load the images:

  <script type="text/javascript">
        Dropzone.options.dropzoneForm = {
            acceptedFiles: "image/*",
            init: function () {
                var thisDropzone = this;

                //Call the action method to load the images from the server
                $.getJSON("/home/GetAttachments/").done(function (data) {
                    if (data.Data != '') {

                        $.each(data.Data, function (index, item) {
                                //// Create the mock file:
                                var mockFile = {
                                    name: item.AttachmentID,
                                    size: 12345
                                };

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

                                // And optionally show the thumbnail of the file:
                                thisDropzone.emit("thumbnail", mockFile, item.Path);

                                // 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;
                        });
                    }
                });                
            }
        };

    </script>

The following is the JSON Result returned inside InIt() function:

{"Data":[{"AttachmentID":1,
"FileName":"/images/wallimages/dropzonelayout.png",
"Path":"/images/wallimages/dropzonelayout.png"},
{"AttachmentID":1,
"FileName":"/images/wallimages/imageslider-3.png",
"Path":"/images/wallimages/imageslider-3.png"}]}

Output

Source Code

You can download the source from Github.

The post How to display existing files on server in dropzone js using ASP.NET MVC appeared first on Venkat Baggu Blog.