Post
Ask Question

How To Drag And Upload Multiple Image Files In ASP.NET

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" />  
  6.        
  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];  
  6.   
  7.                int fileSizeInBytes = file.ContentLength;  
  8.                string fileName = file.FileName;  
  9.                string fileExtension = "";  
  10.   
  11.                if (!string.IsNullOrEmpty(fileName))  
  12.                    fileExtension = Path.GetExtension(fileName);  
  13.   
  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).