In one of my previous articles, I explained how to upload an image to the Server in MVC. You can find the link, given below:

In this article, I will explain how to upload multiple images by using Drag and Drop to the Server, using a JavaScript library called DropZone.js.

DropZone.js is an open source library, which provides drag and drop file uploading with the image preview. This library is independent and does not require JQuery library. It is a very lightweight library.

Thus, to use this, we have to create an MVC project. I created a project inside the project. I will create a folder as "MyImages" to store the uploaded images, as given below:

MyImages

Now, I will go to the Package Manager Console and install DropZone.js, as given below:

package manager Console

After installing, it will show me the success message, as given below:

success message

Now, it will add the following CSS and JavaScript to the project:

css and javascript

Now, I will go to my Index.cshtml. Add the script, given below, to the page and design the view:

  1. @
  2. {
  3. ViewBag.Title = "Home Page";
  4. }
  5. < script src = "~/Scripts/dropzone/dropzone.min.js" >< /script>< script src = "~/Scripts/bootstrap.min.js" >< /script>< link href = "~/Scripts/dropzone/dropzone.min.css" rel = "stylesheet" / >< div class = "jumbotron" >< form action = "~/Home/Upload"
  6. class = "dropzone"
  7. id = "dropzoneJsForm"
  8. style = "background-color:#00BFFF" >< /form>< button id = "submit-all" >
  9. Submit All Files
  10. < /button>< /div>
Now, add the script, given below, in this page also:
  1. <script type="text/javascript">
  2. Dropzone.options.dropzoneForm =
  3. {
  4. init: function() {
  5. this.on("complete", function(data) {
  6. //var res = eval('(' + data.xhr.responseText + ')');
  7. var res = JSON.parse(data.xhr.responseText);
  8. });
  9. }
  10. };
  11. </script>
Now, add an Index action method in the Home controller, as given below:
  1. public class HomeController: Controller
  2. {
  3. public ActionResult Index()
  4. {
  5. return View();
  6. }
  7. }
Afterwards, just run the project. It will show the View, given below:

project

Now, add the action method, given below, in the Home controller to save the files to the Server folder, when uploaded.
  1. public ActionResult Upload()
  2. {
  3. bool isSavedSuccessfully = true;
  4. string fName = "";
  5. try
  6. {
  7. foreach(string fileName in Request.Files)
  8. {
  9. HttpPostedFileBase file = Request.Files[fileName];
  10. fName = file.FileName;
  11. if (file != null && file.ContentLength > 0) {
  12. var path = Path.Combine(Server.MapPath("~/MyImages"));
  13. string pathString = System.IO.Path.Combine(path.ToString());
  14. var fileName1 = Path.GetFileName(file.FileName);
  15. bool isExists = System.IO.Directory.Exists(pathString);
  16. if (!isExists) System.IO.Directory.CreateDirectory(pathString);
  17. var uploadpath = string.Format("{0}\\{1}", pathString, file.FileName);
  18. file.SaveAs(uploadpath);
  19. }
  20. }
  21. } catch (Exception ex) {
  22. isSavedSuccessfully = false;
  23. }
  24. if (isSavedSuccessfully) {
  25. return Json(new {
  26. Message = fName
  27. });
  28. } else {
  29. return Json(new {
  30. Message = "Error in saving file"
  31. });
  32. }
To check it, click on the given UI and it will ask to browse the file you want to upload, as given below:

upload

Now, select the multiple files you want to upload, as given below:

upload

Now, drag the files and drop into the UI, as given below:

drop into the UI

Now, check after dropping the files. It will immediately upload to the Server.

upload to the server

This will save the images in the Server.

images

Now, you can go to the Project folder and check for the files. The files will be available in this folder.

Project folder

Thus, in this way, we can upload multiple images by dragging and dropping, using DropZone.js in MVC.

DropZone

Hope you understood this tutorial. If you have any queries related to this tutorial, you can comment below, so that the next time, I will try to improve my article.