Step 1: Create a blank ASP.NET WebForm Project.

Step 2: Right click on the Project ==>select NuGet Package Manager ==> Select DropZone and Download it.

Step 3: Design a WebForm having a file upload control.
Code
  1. <head runat="server">
  2. <title></title>
  3. <script src="scripts/dropzone/dropzone.min.js"></script>
  4. <link href="scripts/dropzone/basic.min.css" rel="stylesheet" />
  5. <link href="scripts/dropzone/dropzone.css" rel="stylesheet" />
  7. <script src="scripts/ai.0.15.0-build58334.min.js"></script>
  8. </head>
  9. <body>
  10. <form id="form1" runat="server" class="dropzone">
  11. <div>
  12. <div class="fallback">
  13. <asp:FileUpload ID="file" runat="server" AllowMultiple="true" />
  14. </div>
  15. </div>
  16. </form>
  17. </body>
  18. </html>
Step 4: Write the following code in the code behind(.cs) file.
Code
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. foreach (string s in Request.Files)
  4. {
  5. HttpPostedFile file = Request.Files[s];
  7. int fileSizeInBytes = file.ContentLength;
  8. string fileName = file.FileName;
  9. string fileExtension = "";
  11. if (!string.IsNullOrEmpty(fileName))
  12. fileExtension = Path.GetExtension(fileName);
  14. // IMPORTANT! Make sure to validate uploaded file contents, size, etc. to prevent scripts being uploaded into your web app directory
  15. // string savedFileName = Path.Combine(@"..\Files\", Guid.NewGuid().ToString() + fileExtension);
  16. string savepath = Path.Combine(Request.PhysicalApplicationPath, "Files");
  17. string savefile = Path.Combine(savepath, file.FileName);
  18. file.SaveAs(savefile);
  19. }
  20. }
Step 5: Run the project and select multiple files and drag to the box.

Step 6: Drag and drop all the images to the box. It will upload the images and save them to your local folder (here in Files Folder).