DropzoneJS with ASP.net MVC 5

Introduction

• This Article shows how to use DropzoneJS with your ASP.net MVC 5 Application.

What is DropzoneJS ?

• DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.

Why DropzoneJS ?

• It runs without jQuery or other JavaScript frameworks.
• It supports image previews, that don't kill the browser if too many too big images are viewed.
• Big files should get uploaded without a problem.
• It uses the latest API of browsers and also handles older browsers nicely and you can add fallback form elements, which will be used in older browsers.

How to Use DropzoneJS with ASP.net MVC 5 ?

Step 1 :

• Click below mentioned link to Download DropzoneJS Library.

Step 2 :

• In Visual Studio 2013 create an ASP.net MVC 5 web application and name it as DropzoneJs.

Step 3 :

• I have added DropzoneJS's CSS,Javascript and Image files into DropzoneJs Solution is as below.

Step 4:

• Open the bundleconfig.cs file for the project (inside the App_Start folder).
• After that add the below mentioned bundles for it.

          An extract from bundleconfig.cs

            bundles.Add(new ScriptBundle("~/bundles/dropzone").Include(

                        "~/Scripts/dropzone.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(

                       "~/Content/bootstrap.css",

                       "~/Content/site.css",

                       "~/Content/basic.css",

                       "~/Content/dropzone.css"));

Step 5 :

• Open the _layout.cshtml file for the project.
• After that add the below mentioned code line at the bottom of the page and before the @RenderSection().

           @Scripts.Render("~/bundles/dropzone")

Step 6 :

• The complete code for the Index.cshtml view is as below.

Index.cshtml

@{

    ViewBag.Title = "Home Page";

}

<div class="jumbotron">

<form action="~/Home/SaveDropzoneJsUploadedFiles" class="dropzone" id="dropzoneJsForm"></form>

<button id="submit-all">Submit All Files</button>

</div>

@section scripts {

    <script type="text/javascript">

        Dropzone.options.dropzoneJsForm = {

            //prevents Dropzone from uploading dropped files immediately

            autoProcessQueue: false,

            init: function () {

                var submitButton = document.querySelector("#submit-all");

                var myDropzone = this; //closure

                submitButton.addEventListener("click", function () {

                    
                    //tell Dropzone to process all queued files

                    myDropzone.processQueue(); 

                });

                

            }

        };

    </script>

}

Key points of the above code

• Need to add form element with class "dropzone" (i.e. class="dropzone"), rest will be handled by the DropzoneJS itself.
• The id of the form also is very important here.That id's value will use with the Dropzone.options object in the JavaScript section (i.e. Dropzone.options.dropzoneJsForm).
• You have to give the Controller Action method's name as the action attribute of the form element (i.e. action="~/Home/SaveDropzoneJsUploadedFiles").
• You can use autoProcessQueue: false, to prevent DropzoneJS from uploading dropped files immediately.B'cos here in our example we use button's click event for saving the file details. 
• submitButton.addEventListener("click") method to tell DropzoneJS to process all queued files when click the button.

Step 7 :

• The Controller Action method is as below

        
          HomeController.cs

        /// <summary>

        /// to Save DropzoneJs Uploaded Files

        /// </summary>

        public ActionResult SaveDropzoneJsUploadedFiles()

        {

          bool isSavedSuccessfully = false;

          foreach (string fileName in Request.Files)

          {

             HttpPostedFileBase file = Request.Files[fileName];

             //You can Save the file content here

             isSavedSuccessfully = true;

          }

           return Json(new { Message = string.Empty });

        }

Key points of the above code

• This code snippet is self explanatory.So it shows how to handle uploaded file in MVC controller.
• Here you can use any file saving methodology as your preference.That may be a database,Azure cloud blob storage or folder etc.
• You can add it on behalf of the code comment which I have put as like this  //You can Save the file content here

Step 7 :

• That's it.You're done.Now let's run the App by pressing Ctrl + F5 keys.

Step 8 :

• When you click the above 'Drop files to upload' area, it pops up the below mentioned file selection dialog box.

Step 9 : 

• When you click the 'Open' button from the above dialog box,All the selected files will show is as below.

Step 10 : 

• When you click the 'Submit All Files' button,you'll see the below kind of sentiment.

That's it.You're done.

Do you need to Dive Deep ends of  DropzoneJS ?

• DropzoneJs Home

Used Dev Environment in Article's Source Code

• Visual Studio 2013 Express
• .Net Framework 4.5.1
• ASP.net MVC 5
• C#

The source code for this Article

• Source Code - GitHub
  

Conclusion

• You realized that how easily you can configure the DropzoneJS with ASP.net MVC 5.
• So enjoy the characteristics of this Awesome drag'n'drop file upload javascript library.

I hope this helps to You.Comments and feedback greatly appreciated.

If you feel it was a good article,Give me a +1.Thank You.

You Might Also Like

• Attribute Routing With ASP.net MVC 5 - Route Constraints