Site icon ParallelCodes

ASP.NET Upload Multiple Files using FileUpload

ASP.NET Uploading Multiple Files using FileUpload control:

ASP.NET File upload control allows to upload multiple files at once. This feature is supported by all browsers which supports HTML5. File upload control has a property named “AllowMultiple” which accepts bool value of true or false, using which we can get all the files which are selected by the user on the front-end and save it on the server-side when submitting the form or a post back event. So let’s see how to make it work and get multiple files using File upload control in ASP.NET.

Example of uploading multiple files:

We will create two file upload control, one will accept only images and other will accept document like PDF, DOC.

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AspTutorial.Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET Multi-File upload</title>
<style>

</style>
</head>
<body style="font-family:Arial, Helvetica, sans-serif">
<form id="form1" runat="server">
<div>
<h2>ASP.NET Multi file upload example:</h2>
<br />
<h4>Image Upload:</h4>
<asp:FileUpload runat="server" ID="imageUpload" AllowMultiple="true" accept="image/*"/>
<asp:Button runat="server" ID="btnImageUpload" Text="Upload Images" OnClick="btnImageUpload_Click"/>

<asp:Label runat="server" ID="lblImageNames" />

<br />
<h4>Document Upload:</h4>
<asp:FileUpload runat="server" ID="documentUpload" AllowMultiple="true" accept=".pdf,.doc,.docx"/>
<asp:Button runat="server" ID="btnDocumentUpload" Text="Upload Documents" OnClick="btnDocumentUpload_Click"/>

<asp:Label runat="server" ID="lblDocumentNames" />
</div>
</form>
</body>
</html>

Here, on both the labels, we will display a HTML link to navigate to the uploaded files by the users. Also we will rename all the files selected by the users and save it inside a folder called “UploadFiles“. Please create a folder with name “UploadFiles” in your project directory. On the button click events of the respective buttons we will save the files from FileUpload control.

Default.aspx.cs:

using System;
using System.Text;
using System.Web;
using System.Web.UI;

namespace AspTutorial
{
public partial class Default : Page
{

protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnImageUpload_Click(object sender, EventArgs e)
{
try
{
StringBuilder files = new StringBuilder();
if(imageUpload.HasFiles)
{
foreach(HttpPostedFile file in imageUpload.PostedFiles)
{

string fileName = "image-"+ Guid.NewGuid() + DateTime.Now.ToString("ddMMyyyyHHmmss")+ System.IO.Path.GetExtension(file.FileName);
string filePath = System.IO.Path.Combine(Server.MapPath("~/UploadFiles/"), fileName);
file.SaveAs(filePath);
files.Append("<br/><a href='/UploadFiles/"+ fileName + "'>" + fileName + "</a>");
}
}

lblImageNames.Text = files.ToString() ;
}
catch(Exception ex)
{
lblDocumentNames.Text = ex.Message.ToString();
}
}

protected void btnDocumentUpload_Click(object sender, EventArgs e)
{
try
{
StringBuilder files = new StringBuilder();
if (documentUpload.HasFiles)
{
foreach (HttpPostedFile file in documentUpload.PostedFiles)
{
string fileName = "document-" + DateTime.Now.ToString("ddMMyyyyHHmmss") + System.IO.Path.GetExtension(file.FileName);
string filePath = System.IO.Path.Combine(Server.MapPath("~/UploadFiles/"), fileName);
file.SaveAs(filePath);
files.Append("<br/><a href='/UploadFiles/" + fileName + "'>" + fileName + "</a>");
}
}

lblDocumentNames.Text = files.ToString();
}
catch (Exception ex)
{
lblDocumentNames.Text = ex.Message.ToString();
}
}
}
}

All the files will be saved in the “UploadFiles” folder and we are using DateTime string with the file name to avoid duplicate file name issue.

Download Source Code


Exit mobile version