Table of contents
1.
Introduction
2.
ASP.NET FileUpload
3.
ASP.NET FileUpload Properties
3.1.
ASP.NET FileUpload Property Window
4.
Implementation
4.1.
WebControls.aspx
4.2.
WebControls.aspx.cs
5.
FAQs
6.
Key Takeaways
Last Updated: Mar 27, 2024

ASP.NET FileUpload

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Source: Link

Introduction

Active Server Pages (ASP) and Active Server Pages (ASP.NET) are server-side technologies for displaying interactive web pages.

ASP.NET offers developers a wide range of options in a large, diverse ecosystem of libraries and tools. Developers can also design custom libraries that can be shared with any .Net platform application.

ASP.NET also contains an authentication system for developers, which includes a database, libraries, templates for handling logins, external authentication to Google, Facebook, and other services, and more.

In detail, let us learn about one of the interesting web form controllers, i.e. ASP.NET FileUpload controllers.

ASP.NET FileUpload

The input controller ASP.NET FileUpload is used to upload files to the server. It adds a browse button to the form, which opens a window where you can select a file from your local machine.

We can drag FileUpload from the toolbox in Visual Studio to use it.

This is a server-side control that ASP.NET creates with its tag. The following is an example.

< asp:FileUpload ID="FileUpload1" runat="server"/>

 

The server renders the HTML control and produces the following code to the browser.

<input name="FileUpload1" id="FileUpload1" type="file"> 

ASP.NET FileUpload Properties

This control has its own properties that are tabled below.

Property Description
TabIndex The tab order of the control.
AccessKey It is used to set a keyboard shortcut for the control.
BorderColor It is used to set the border colour of the control.
BackColor It is used to set the background colour of the control.
Font It is used to set the font for the control text.
BorderWidth It is used to set the width of the border of the control.
Text It is used to set text to be shown for the control.
ForeColor It is used to set the colour of the control text.
Visible To set visibility of control on the form.
ToolTip It displays the text when the mouse is over the control.
Width It is used to set the width of the control.
Height It is used to set the height of the control.
AllowMultiple It is used to allow upload multiple files by setting true or false.

 

ASP.NET FileUpload Property Window

ASP FileUpload 1

Implementation

Here, we are implementing file upload control in web form.

WebControls.aspx

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
</head>
<body>
   <form id="form1" runat="server">
       <div>
           <p>Coding Ninjas</p>
           <p>Browse to Upload File</p>
           <asp:FileUpload ID="FileUpload1" runat="server" />
       </div>
       <p>
           <asp:Button ID="Button1" runat="server" Text="Upload File" OnClick="Button1_Click" />
       </p>
   </form>
   <p>
       <asp:Label runat="server" ID="FileUploadStatus"></asp:Label>
   </p>
</body>
</html>

WebControls.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CodingNinjasWebForms
{
   public partial class WebForm1 : System.Web.UI.Page
   {
       protected System.Web.UI.HtmlControls.HtmlInputFile File1;
       protected System.Web.UI.HtmlControls.HtmlInputButton Submit1;
       protected void Page_Load(object sender, EventArgs e)
       {

       }

       protected void Button1_Click(object sender, EventArgs e)
       {
           if ((FileUpload1.PostedFile != null) && (FileUpload1.PostedFile.ContentLength > 0))
           {
               string fn = System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName);
               string SaveLocation = Server.MapPath("upload") + "\\" + fn;
               try
               {
                   FileUpload1.PostedFile.SaveAs(SaveLocation);
                   FileUploadStatus.Text = "The file has been uploaded.";
               }
               catch (Exception ex)
               {
                   FileUploadStatus.Text = "Error: " + ex.Message;
               }
           }
           else
           {
               FileUploadStatus.Text = "Please select a file to upload.";
           }
       }
   }
}

 

As shown in the below screenshot, create a directory in the project to store submitted files.

When we run the code, we will get the following results.

We are uploading a file CodingNinjas.txt.

After uploading, it displays a successful file uploaded message, as shown in the screenshot below.

The file is stored in the upload directory. If you go within the folder, you'll see that the uploaded file is there.

Hence, with this, we learned to upload a file in ASP.NET.

FAQs

  1. What is ASP.NET?
    Active Server Pages (ASP) and Active Server Pages (ASP.NET) are server-side technologies for displaying interactive web pages. ASP.NET offers developers a wide range of options in a large, diverse ecosystem of libraries and tools.
     
  2. What is a web form?
    Visual Studio comes with ASP.NET Web Forms, which is part of the ASP.NET web application platform. ASP.NET Web Pages, ASP.NET MVC, and ASP.NET Single Page Apps are the other three programming paradigms you can use to construct ASP.NET web applications.
     
  3. What are controls of the form?
    ASP.NET provides web forms controls, which are used to create HTML components. These controls are categorised as server-based and client-based.
    There are various server controls available for the web forms in ASP.NET:
    1.Label
    2.Checkbox
    3.Text Box
    4.Radio Button and many more.
     
  4. How do we handle the submit request from the web form?
    The handling of the submit request is based on the trigger mechanism of the code behind the file, which triggers when the submit button is clicked on the web forms.
     
  5. How do we run the user registration form?
    To run the web form, we just right click and select the view in the browser option in the code editor, to run the user registration form.

Key Takeaways

In this article, We learned about how to create a project to make a web form with ASP.NET FIleUpload controller. We learned about the properties of the ASP.NET FileUpload class. We also learned how to handle the submit request in the web form.

Apart from this, you can also expand your knowledge by referring to these articles on Features Of ASP Net and ASP Full Form.

For more information about backend development, get into the entire Backend web development course.

Happy Learning!

Live masterclass