Post
Ask Question

Uploading Multiple Files With ListBox in ASP.NET

Introduction

Today, I have provided an article showing you how to upload multiple files with a ListBox control in ASP.NET. We can upload a single file at a time in ASP.NET using the FileUpload control. However, there is no direct way in ASP.NET to upload multiple files at a time. We can do that in ASP.NET using FileUpload with a ListBox control. In this article, we will take a FileUpload control, an add Button, and a remove Button. When a user uploads a file and clicks on the add Button the uploaded file will be shown in the ListBox. After that select a file from the ListBox and click on the remove Button to remove the uploaded file from list. All you have to do is implement and hook it up to your website. First of all, you start Visual Studio .NET and make a new ASP.NET website using Visual Studio 2010.

Now you have to create a website.

  • Go to Visual Studio 2010
  • New-> Select a website application
  • Click OK
    Website

Now add a new page to the website.

  • Go to the Solution Explorer
  • Right-click on the Project name
  • Select add a new item
  • Add a new web page and give it a name
  • Click OK
    New page

Design the page and place the required controls on it. Now drag and drop one FileUpload, add Button and remove Button control on the form. When a user uploads a file and clicks on the add Button, the uploaded files will be shown in the ListBox. After that, select a file from the ListBox and click on the remove Button to remove the uploaded file from the ListBox. Let's take a look at a practical example.

.aspx Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadFileWithListBox.aspx.cs" Inherits="UploadFileWithListBox" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div>  
        </div>  
        <p>  
            <asp:FileUpload ID="FileUpload1" runat="server" />  
        </p>  
        <p>  
            <asp:ListBox ID="ListBox1" runat="server" Rows="5" SelectionMode="Single" Width="221px" BackColor="#CCCCFF">  
            </asp:ListBox>  
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>  
        </p>  
        <p>  
            <asp:Button ID="Button1" runat="server" Text="Add" Width="75px" OnClick="Button1_Click" />  
            <asp:Button ID="Button2" runat="server" Text="Remove" Width="98px" OnClick="Button2_Click" />  
        </p>  
    </form>  
</body>  
</html>

Now add the following namespaces.

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

Now double-click on the add Button control and write the following code to add the uploaded file in ListBox.

protected void Button1_Click(object sender, EventArgs e)  
{  
    try  
    {  
        if (FileUpload1.HasFile)  
        {  
            if (FileUpload1.PostedFile.ContentLength > 0)  
            {  
                if (ListBox1.Items.Contains(new ListItem(System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName))))  
                {  
                    Label1.Text = "File already in the ListBox";  
                }  
                else  
                {  
                    Files.Add(FileUpload1);  
                    ListBox1.Items.Add(System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName));  
                    Label1.Text = "Add another file or click Upload to save them all";  
                }  
            }  
            else  
            {  
                Label1.Text = "File size cannot be 0";  
            }  
        }  
        else  
        {  
            Label1.Text = "Please select a file to add";  
        }  
    }  
    catch (Exception ex)  
    {  
        // Handle the exception here (optional)
    }  
}

Some important property.

  • FileUpload1.HasFile: The HasFile property gets a value indicating whether the FileUpload control contains a file to upload.
  • ContentLength: To find the size of an upload file in bytes.
  • FileName: To get the name of the file.

Now double-click on the Remove Button control and write the following code to remove the uploaded file from the ListBox.

protected void Button2_Click(object sender, EventArgs e)  
{  
    if (ListBox1.Items.Count > 0)  
    {  
        if (ListBox1.SelectedIndex < 0)  
        {  
            Label1.Text = "Please select a file to remove";  
        }  
        else  
        {  
            Files.RemoveAt(ListBox1.SelectedIndex);  
            ListBox1.Items.Remove(ListBox1.SelectedItem.Text);  
            Label1.Text = "File removed";  
        }  
    }  
}

Now the .cs file looks like the following code.

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

public partial class UploadFileWithListBox : System.Web.UI.Page
{
    public static ArrayList Files = new ArrayList();
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        try
        {
            if (FileUpload1.HasFile) // that the FileUpload control contains a file.
            {
                if (FileUpload1.PostedFile.ContentLength > 0) // Get the size of the upload file.
                {
                    if (ListBox1.Items.Contains(new ListItem(System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName)))) // Get the name of the file to upload.
                    {
                        Label1.Text = "File already in the list";
                    }
                    else
                    {
                        Files.Add(FileUpload1);
                        ListBox1.Items.Add(System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName));
                        Label1.Text = "Add another file or click Upload to save them all";
                    }
                }
                else
                {
                    Label1.Text = "File size cannot be 0";
                }
            }
            else
            {
                Label1.Text = "Please select a file to add";
            }
        }
        catch (Exception ex)
        {
            // Handle the exception
        }
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        if (ListBox1.Items.Count > 0)
        {
            if (ListBox1.SelectedIndex < 0)
            {
                Label1.Text = "Please select a file to remove";
            }
            else
            {
                Files.RemoveAt(ListBox1.SelectedIndex);
                ListBox1.Items.Remove(ListBox1.SelectedItem.Text);
                Label1.Text = "File removed";
            }
        }
    }
}

Now run the application and test it.

Application

Now upload a file and click on the add Button to add the file in ListBox.

ListBox

Now add another file or click the add Button.

Add Button

Now select a file from the ListBox.

Add

Now click on the remove Button to remove the file from the list.

Remove


Similar Articles