DropzoneJS is an open source library that provides drag and drop files upload with image preview.
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.
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
Add two images for display upload files image.
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 NameLast NameRegistration 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 screen shot for get data in controller.
Browser Support
- Chrome 7+
- Firefox 4+
- IE 10+
- Opera 10+(Version 12 for MacOS is disabled because their API is buggy)
- Safari 6+