In this article I will explain with an example, how to view files after upload in ASP.Net using C# and VB.Net.
The names of uploaded files will be displayed as list and when clicked it will display the file.
HTML Markup
The following HTML Markup consists of an ASP.Net FileUpload control, Button, a Repeater control, an Image and a Literal control.
Inside the ASP.Net Repeater control, there is an ASP.Net LinkButton for displaying the file. The LinkButton has been assigned with CommandArgument property and OnClick event handler.
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
<hr/>
<asp:Repeater runat="server" ID="rptFiles">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:LinkButton runat="server" CommandArgument='<%#Eval("Name") %>'
Text='<%#Eval("Name") %>' OnClick="View" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<hr/>
<asp:Image ID="imgFile" runat="server" Height="100" Width="100" Visible="false" />
<asp:Literal ID="ltEmbed" runat="server" Visible="false" />
Namespaces
You will need to import the following namespace.
C#
VB.Net
Uploading Files using ASP.Net FileUpload Control
When the Upload Button is clicked, following event handler is executed.
Inside this event handler, the uploaded file is saved into a Folder named Uploads within the Project Folder.
Once the file is uploaded, the user is redirected to the same page.
C#
protected void Upload(object sender, EventArgs e)
{
string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
string filePath = "~/Uploads/" + fileName;
FileUpload1.PostedFile.SaveAs(Server.MapPath(filePath));
Response.Redirect(Request.Url.AbsoluteUri);
}
VB.Net
Protected Sub Upload(ByVal sender As Object, ByVal e As EventArgs)
Dim fileName As String = Path.GetFileName(FileUpload1.PostedFile.FileName)
Dim filePath As String = "~/Uploads/" & fileName
FileUpload1.PostedFile.SaveAs(Server.MapPath(filePath))
Response.Redirect(Request.Url.AbsoluteUri)
End Sub
Displaying Files from folder in ASP.Net Repeater control
Inside the Page Load event handler, the files are fetched from Uploads folder and then the fetched files are inserted into Generic List Collection of ListItem.
Finally, Generic List Collection of ListItem will be used to populate the Repeater control.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
string[] filePaths = Directory.GetFiles(Server.MapPath("~/Uploads/"));
List<ListItem> files = new List<ListItem>();
foreach (string filePath in filePaths)
{
string fileName = Path.GetFileName(filePath);
files.Add(new ListItem(fileName, "~/Uploads/" + fileName));
}
rptFiles.DataSource = files;
rptFiles.DataBind();
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim filePaths As String() = Directory.GetFiles(Server.MapPath("~/Uploads/"))
Dim files As New List(Of ListItem)()
ForEach filePath As String In filePaths
Dim fileName As String = Path.GetFileName(filePath)
files.Add(New ListItem(fileName, "~/Uploads/" + fileName))
rptFiles.DataSource = files
rptFiles.DataBind()
Next
End If
End Sub
Displaying Files on Browser in ASP.Net
When the LinkButton inside Repeater is clicked, following event handler is executed.
Inside this event handler, first the file name is retrieved using the CommandArgument property of LinkButton and the file extension is fetched using GetExtension method of Path class.
Then based on File extension, the file is displayed.
For example, the Image file is displayed in Image control, while the PDF file is embedded using Object tag inside the Literal control.
Note: In similar way you can extend this code to display other file formats.
C#
protected void View(object sender, EventArgs e)
{
imgFile.ImageUrl = string.Empty;
ltEmbed.Text = string.Empty;
string fileName = (sender as LinkButton).CommandArgument;
string extension = Path.GetExtension(fileName);
switch (extension.ToLower())
{
case ".png":
case ".jpg":
case ".jpeg":
case ".gif":
imgFile.ImageUrl = "~/Uploads/" + fileName;
break;
case ".pdf":
string embed = "<object data=\"{0}\" type=\"application/pdf\" width=\"300px\" height=\"200px\">";
embed += "If you are unable to view file, you can download from <a href = \"{0}\">here</a>";
embed += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file.";
embed += "</object>";
ltEmbed.Text = string.Format(embed, ResolveUrl("~/Uploads/" + fileName));
break;
default:
break;
}
imgFile.Visible = !string.IsNullOrEmpty(imgFile.ImageUrl);
ltEmbed.Visible = !string.IsNullOrEmpty(ltEmbed.Text);
}
VB.Net
Protected Sub View(ByVal sender As Object, ByVal e As EventArgs)
imgFile.ImageUrl = String.Empty
ltEmbed.Text = String.Empty
Dim fileName As String = (TryCast(sender, LinkButton)).CommandArgument
Dim extension As String = Path.GetExtension(fileName)
Select Case extension.ToLower()
Case ".png", ".jpg", ".jpeg", ".gif"
imgFile.ImageUrl = "~/Uploads/" & fileName
Case ".pdf"
Dim embed As String = "<object data=""{0}"" type=""application/pdf"" width=""300px"" height=""200px"">"
embed += "If you are unable to view file, you can download from <a href = ""{0}"">here</a>"
embed += " or download <a target = ""_blank"" href = ""http://get.adobe.com/reader/"">Adobe PDF Reader</a> to view the file."
embed += "</object>"
ltEmbed.Text = String.Format(embed, ResolveUrl("~/Uploads/" & fileName))
Case Else
End Select
imgFile.Visible = Not String.IsNullOrEmpty(imgFile.ImageUrl)
ltEmbed.Visible = Not String.IsNullOrEmpty(ltEmbed.Text)
End Sub
Screenshot
![View Files after Upload in ASP.Net using C# and VB.Net]()
Downloads
