Friday, February 14, 2014

DropzoneJS with MVC 5

Articles Of The Day


  • This Article shows how to use DropzoneJS with your 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 MVC 5 ?

Step 1 :
  • Click below mentioned link to Download DropzoneJS Library.

DropzoneJS Download

Step 2 :
  • In Visual Studio 2013 create an 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.
DropzoneJS with MVC 5

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(

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

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().

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


    ViewBag.Title = "Home Page";

<div class="jumbotron">

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

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


@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


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

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

DropzoneJS with MVC 5

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

DropzoneJS with MVC 5

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

DropzoneJS with MVC 5

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

DropzoneJS with MVC 5

That's it.You're done.

Do you need to Dive Deep ends of  DropzoneJS ?

Used Dev Environment in Article's Source Code

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

The source code for this Article


  • You realized that how easily you can configure the DropzoneJS with 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


  1. Replies
    1. Hi Thabo,

      Thanks, I’m glad you enjoyed it ! :)

  2. good guidance
    continue your duty
    i wish to you

    1. Hi Jeevalingam,

      You're warmly welcome.Thanks. :)

  3. Wow Nice..I can even Add this to my Thesis Project System

    1. Hi Jenray,

      Thanks, I’m glad you found it useful ! :)

  4. Nice one smapth about drop js and I will look deep in drop js what else we can do in drop js.

    1. Hi Anuj,

      Thanks. :)
      Yes you can do a lot by using this nice JS library.For more info please look into their home page.It's hear.

  5. Hello sampath ,

    This is interesting and usefull .
    Have you gone through to the deep of the implementation ?
    Is it asynchronus process ? or else
    Does it used iframe to upload ?
    How ever is there a page refresh while upload ?

    Its nice to see no jquery involvement . Usually Ajax cannot upload files . But lately XHR2 have introduced to this purpose ,yet sadly it is not supported by alll browsers.
    Its worth find the technology usage behind the scene and check browser compatibility of the plugin .

    1. Hi Hasitha,

      Thanks for your feedback.

      Your Q 1: Have you gone through to the deep of the implementation ?

      Ans 1 : I did this as a R&D task.So I never went through DJS's JavaScript implementation code base on Git hub.

      Your Q 2: Is it asynchronous process ? or else ?

      Ans 2 : Yes.Its Fully Asynchronous process.

      Your Q 3 : Does it used iframe to upload ?

      Ans 3 : There is No Iframe implementation.

      Your Q 4 : How ever is there a page refresh while upload ?

      Ans 4 : No. There is no page refresh while files upload.

      Note : It supports all the latest browsers and others which are starting from Chrome 7+,Firefox 4+ and IE 10+.For all the other browsers, dropzoneJs provides an old school file input fall-back.

  6. Replies
    1. Hi Kranthi,

      Thanks, I’m glad you enjoyed it ! :)

  7. How many files one can select at a time?

    1. Hi Alka,

      No, there is no such limit. You can apply any number of selections, if that permits the size of your storage media. :)

  8. Please sir how to resize the image and drag the image from one location to another in canvas.

    1. Please read this.May be helped to you.

  9. Can you let me know y this is not working in IE 11 ? Do i have to change anything.

    1. Hi Anjali,

      It should work,according to their site's details.It says :


      Chrome 7+
      Firefox 4+
      IE 10+
      Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)
      Safari 6+

      Please check here :

    2. Yes it's working in their site but NOT in the application download which u have provided..

      Any help at the earliest would b greatful :)

    3. Is this not working only with IE 11 or what ?

    4. May be or may not be .. i dint check in other IE versions

    5. Not IE.I mean other browsers such as Chrome,Firefox etc ..

    6. its working in other browsers

    7. OK. Then that is may be the browser compatibility issue.Please put your bug on SO.

  10. For adding more info , i get exception to break the application when i drag n drop any file when iam in IE browser.

    Exception at

    "dragover": function(e) {
    var efct;
    efct = e.dataTransfer.effectAllowed;
    e.dataTransfer.dropEffect = 'move' === efct || 'linkMove' === efct ? 'move' : 'copy';
    return _this.emit("dragover", e);

    1. Hi Anjali,

      Please put your question on stackoverflow under the "dropzone.js" tag.You'll have quick response there.

  11. i wanted to know the code for storing the image in some URL, a free storage URL...please help...thanks

    1. Hi Khlood ,

      Where are you going to store the images (i.e database,Azure cloud blob storage or folder etc.) ?

    2. Hi Khlood,

      There is no official SDK for .NET with regard to dropbox.But you can use ' HigLabo' library for interaction with the Dropbox.Please read below article for more info.It's for web forms.But I hope you can get some knowledge about it and modify it to MVC app.I never try that though. :(

      Link :

      Good Luck ! :)

    3. thanks alot sampath, i was going through a tutorial...could you help me out with this please? check it out please...

    4. the link that you provided has MVC implementation too :D :D look here

      thanks!!! i'm trying this out, if i need help i'll comment here...

  12. Have you implemented cancel files also

    1. Hi Srinivas,

      You can do that one pretty easily by using 'addRemoveLinks' options.If you want to remove all files, simply use .removeAllFiles(). Please check their API for more info :

  13. Dropzone:

    We are using dropzone in our MVC application.One of our requiremnt is to cancel Inprogress uploads.
    Currently we are uploading images and documents to sharepoint site.
    When we drag and drop images, we are displaying removes links for each image i.e. those images which
    are in progress with 'Cancel Upload' and queued files are with 'Remove Upload'.
    Here when we drag and drop images, Upload action (i.e. reaching the controller from js) is firing first and there after if you click on 'Cancel Upload'button, cancel action is calling.

    Working fine in local system but this is not working perfectly in azure environment and here we are unable to cancel Inprogress upload images.(cancelled images are uploaded to sharpeint site)

    We can able to remove images from dropzone and at the same time inprogress images are not cancelling properly from code behind(MVC controller action).

    Also Upload method is taking time to reach controller than cancel action.
    So, We verified the dropzone events and removed unnecessary dropzone code(removed progress bar code).

    We request you to provide solution for the above one as we need to cancel Inprogress images.

    The flow is like this.

    1.Once Drag and Drop image, then Upload controller action is firing.

    2.Image are with Cancel Upload button to cancel Inprogress upload.

    3.Once you clicked on Cancel Upload button, then Cancel action is firing.

    4.Here we are using HTTP web Request for file upload(chunk wise).

  14. here code snippet:
    Code is given below.

    MVC Controller:

    public void Upload(HttpPostedFileBase file)
    string key = string.Format("FileUploader{0}", file.FileName);
    AzureCache.Put(key, false);
    FileHelper fileUploader = new FileHelper();
    //Here we are using HTTP Web Request chunk wise upload
    fileUploader.Upload1(file.InputStream, file.FileName, key);
    catch (Exception ex)

    //return "File uploaded: " + file.FileName;

    public string Cancel(string fileName)
    string key = string.Format("FileUploader{0}", fileName);
    AzureCache.Put(key, true);

    return "File get canceled: " + fileName;


    $(document).ready(function () {

    Dropzone.options.frmUploader = {
    paramName: "file",
    maxFilesize: 10,
    init: function () {
    this.on("sending", function (file) {
    alert('Sending the file' +

    this.on("complete", function (file) {
    alert("Completed: ";

    this.on("removedfile", function (file) {
    alert("removedfile: ";

    this.on("canceled", function (file) {

    $.get("Home/Cancel?fileName=", function (data) {

    addRemoveLinks: true,

    1. Hi srinivas,

      Please put your question here : with the Tag : dropzone.js

      or contact the author of DropzoneJs : G+ : OR Twitter :

      Good Luck ! :)

  15. Hello Sampath Lokuge

    How can i modify the code so that i can save the uploaded pictures(file content) to the images folder of the application?

    this is based on the code comment that says: //You can Save the file content here

    1. //You can Save the file content here
      var fileSaveName = Path.GetFileName(file.FileName);
      file.SaveAs(Path.Combine(@"c:\YourProjectDirectory\YourApp\Images", fileSaveName));
      isSavedSuccessfully = true;

  16. Great tutorial. Someone who has actually tested their code before posting. Great stuff! Thank you.

  17. Excellent Post in Mvc,
    Here i have similar article i.e. Dropzonejs easy way to upload images c# with WebForms. Hope this will be helpfull for someone who need it in Webforms.

  18. Do we need to add enctype="multipart/form-data" in form tag?
    As i am getting only first image in Request.Files.

  19. Very well explained about DropJS with ASP.Net.

  20. Hello friend How i can ingrate dorpzone jquery with existing from have many inputs in mcv

  21. Hello, how to implement dropzone in mvc 4 with entity framework

  22. How can i modify the code so that i can save the uploaded pictures to the sql database?


Thanks for your Feedback.