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).
Next Recommended Reading Upload Video File, Audio File and Image File in SQL Server DB