16 Oct

How to display existing files on server in dropzone js using ASP.NET MVC

In 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 holds 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

display existing files on server dropzone js in asp.net mvc jquery

display existing files on server dropzone js in asp.net mvc jquery

 

 Source Code

You can download the source from the Github

2 thoughts on “How to display existing files on server in dropzone js using ASP.NET MVC

  1. That’s all fine and dandy what you have provided, but when about passing the list to the view and then looping through that instead of making another call to the server to retrieve the images……

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>