DropzoneJS is an open source library that provides drag and drop files upload with image preview.

Download Sample Project

Dropzone supports drag and drop functionality for thumbnail image, multiple uploads and progress bar which can be integrated with MVC.

This blog is an example of multiple files upload with form data and without form data.We can fetch response from the controller action and we can mold it any form while showing it on client side.Errors can also be Received in response.

How to install in your application.

Add stylesheet and Jqeury for Dropzone JS

You can also add cdn for stylesheet and .js file from this link :Click Here.
Add two images for display upload files image.

How to use it in application.

Add form tag in your html body and add class dropzone to form tag.

How to use dropzone js with form data.




 
        



First Name
        


        



Last Name
        


        



Registration Number

Add this script in your html page.

Add action method in you controller.

Add this mehtod in your controller. Dropzone file upload using ajax and pass form parameter in post call. In that call you can get model data and your uploaded files.

            [HttpPost]
            public ActionResult SaveFilesAndData(StudentModel model)
            {
                try
                {
                    HttpFileCollectionBase filesData = Request.Files;//Here you can get multiple files.
                    for (int i = 0; i < filesData.Count; i++)
                    {
                        //This code for save your file in directory
                        HttpPostedFileBase file = Request.Files[i];
                        //Save file content goes here
                        if (file != null && file.ContentLength > 0)
                        {
                            string path = Server.MapPath(@"~/DropjoneImages/");
                            bool isExists = System.IO.Directory.Exists(path);
                            if (!isExists)
                                System.IO.Directory.CreateDirectory(path);
                            file.SaveAs(path + file.FileName);
                        }
                    }
                    return Json(new { success = true, message = "" }, JsonRequestBehavior.AllowGet);
                }
                catch (Exception ex)
                {
                    return Json(new { success = false, message = ex.Message }, JsonRequestBehavior.AllowGet);
                }
            }

Note : Dropjonne js is provide others good configuration properties using that you can achive your requirement.

Here i have attached my screen shot for upload file and form data.