Click here to Skip to main content
15,867,308 members
Articles / JSON

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

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
9 Feb 2015CPOL 28.6K   2  
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.

C#
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.

C#
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:

HTML
<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:

JavaScript
{"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

Image 1

Display existing files on server dropzone js in ASP.NET MVC jquery

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) eBiz Solutions http://venkatbaggu.com/
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --