The controls being used are
1.
One HtmlInputFile control
2.
A button to add the file to the list box
3.
A list box control to show the user his selected files
4.
A delete button to remove a previously selected file
5.
A button to save the files into the specific directory
The below listing will show how the HTML code will look
after we have added the controls into our WebForm.
Listing 1
<INPUT style="Z-INDEX: 101; LEFT: 83px;
WIDTH: 489px; POSITION: absolute; TOP: 67px; HEIGHT: 22px" type="file"
runat="server" id="FileUpload" size="62">
<asp:Button id="Button1"
style="Z-INDEX: 102; LEFT: 591px; POSITION: absolute; TOP: 66px"
runat="server" Text="Attach"></asp:Button>
<asp:ListBox id="ListBox1"
style="Z-INDEX: 103; LEFT: 84px; POSITION: absolute; TOP: 104px"
runat="server" Height="93px" Width="565px"></asp:ListBox>
<asp:Button id="Button2"
style="Z-INDEX: 104; LEFT: 339px; POSITION: absolute; TOP: 205px"
runat="server" Text="Upload"></asp:Button>
<asp:Button id="Button3"
style="Z-INDEX: 105; LEFT: 684px; POSITION: absolute; TOP: 131px"
runat="server" Text="Delete" Width="70px"></asp:Button>
Figure 1
Code behind (C#)
In this section, we will see how each button click event is
handled to provide the correct behavior.
Listing 2
private void btnAttach_Click(object sender, System.EventArgs e)
{
// Save the attached file to fileName variable
string fileName = FileUpload.PostedFile.FileName;
// If the counter is null then create one with default value equal to 0
if (ViewState["i"] == null)
{
ViewState["i"] = 0;
}
// Check if a file is selected
if (fileName != null || fileName != string.Empty)
{
// Add it to the collection
ListBox1.Items.Add(FileUpload.PostedFile.FileName);
// Save an index for each selected file
int i = Convert.ToInt32(ViewState["i"]);
// Save the fileupload control into a different session
Session["myupload" + i] = FileUpload;
// Increment the counter
i++;
// Set the ViewSate to the latest counter value.
ViewState["i"] = i;
}
}In the above listing, we are handling the Attach button
click event. First, we will get the selected file name. We used the ViewState
to save the counter (how many files selected). If a file has been selected, we
will save its filename as a new Item in the ListBox control, then save its
instance in the session state. In the final two lines of code, we are updating
the counter value and resaving it in ViewState.
Figure 2
The figure above is showing the process that we just
explained. Each selected item is being added to the ListBox control.
Listing 3
private void btnDelete_Click(object sender, System.EventArgs e)
{
if (ListBox1.SelectedIndex > - 1)
{
int uploadedFileIndex = ListBox1.SelectedIndex;
Session.Remove("myupload" + uploadedFileIndex);
ListBox1.Items.Remove(ListBox1.SelectedValue);
}
} In the above listing, we are handling the delete button
click event. First we are checking if an item in the ListBox control is being
selected. We are saving the selected index into a variable, setting its
specific information in the session state to null, and finally it gets removed
from the ListBox Items collection.
Figure 3
The above figure is showing the ListBox control after we
have selected the second item and pressed the delete button.
Listing 4
private void btnUpload_Click(object sender, System.EventArgs e)
{
int sessionCount = Session.Count
for (int i = sessionCount - 1; i >= 0; i--)
{
if (sessionCount <= 3)
{
HtmlInputFile hif = (HtmlInputFile)Session["myupload" + i];
if (hif.PostedFile.ContentLength <= 500000)
{
string storePath = Server.MapPath("~") + "/MultipleUpload";
if (!Directory.Exists(storePath))
Directory.CreateDirectory(storePath);
hif.PostedFile.SaveAs(storePath + "/" + Path.GetFileName
(hif.PostedFile.FileName));
Label1.Text = "Your Files are uploaded successfully";
ListBox1.Items.Clear();
}
else
Label1.Text = "An error occured";
}
else
Label1.Text =
"You have exceeded the maximum number of files to be uploaded (3)";
}
Session.RemoveAll();
}The last stage in our code behind is the upload click event.
As you can see, the first thing to do is to get the number of the session
variables. Because all the selected files are being saved inside session
variables, we will loop through all of the sessions to upload its specified
file. Note that we are creating a new folder called MultipleUpload where all
the files are being saved on the web server. Do not forget to give the write
permission for ASPNET user to avoid the access is denied error. After the files
have been uploaded, a message will be displayed to inform the user about the
upload status. Finally we clear all the items in the ListBox and the session variables.
Figure 4
The above figure is showing the final stage when the files
have been successfully uploaded.
Remember to modify the <httpRuntime
maxRequestLength="10000"/> in the web.config to be able to upload
files which their size exceeds 4MB. The maxRequestLength value is in KB. In
this case, we have modified it to accept the maximum size of 10 MB.
