DropzoneJS with ASP.net MVC 5

• 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 ?

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

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

            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";

}

<divclass="jumbotron">

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

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

</div>

@section scripts {

    <scripttype="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>

        publicActionResult 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.

Used Dev Environment in Article's Source Code

• Source Code - GitHub

• 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.