Since Microsoft has Visual Web Developer 2008 available for free, it makes sense to use it. In fact, this free addition is more powerful than Visual Studio 2005 Professional (for web development that is) and...did I mention...it's free. Here's the download link.
http://www.microsoft.com/express/vwd/
You'll also need the AJAX Control Toolkit for this particular feature I'm going to describe. Here's the download link. And, btw...it's free too.
http://www.codeplex.com/AjaxControlToolkit
The first thing you will need to determine is the maximum file size you will allow someone to upload. The default is 4mb. If you want anything larger you will have to modify your Web.config file. Here is an example that will change the upload limit to 100mb. <httpRuntime maxRequestLength="102400" /> Simply add this line to your Web.config and change the number to the maximum file size you want. Notice that the file size is specified in kb and not mb (100 x 1024 = 102400).
Ok, now that we've taken care of that, on to the upload control. For purposes of this discussion, I've created a form called upload.aspx. I'm also using a predetermined upload location. You can easily modify the code to allow for the specification or even the creation of the upload folder but I'm not going to get into that. I'm just going to give you the basics for a working upload control. So here's what you'll need:
A web form (I've called mine upload.aspx)
A Label control to use for displaying an error message
An AJAX ScriptManager control
An AJAX UpdatePanel control
A Progress Bar image (I made my own using Photoshop)
A Label control to use as an update status (Please wait...)
A Label control to use for displaying a success message
So here's the code...remember you can make the control, variable, and function names whatever you like.
In the HEAD section of your web form you'll need this code:
<script runat="server">
Protected Sub UploadFile(ByVal sender As Object, ByVal e As System.EventArgs)
If myFile.HasFile Then
Dim strFileName As String
strFileName = myFile.FileName
myFile.PostedFile.SaveAs(Server.MapPath("/whateverfolderyouwant/" + strFileName))
lblMsg.Text = strFileName + " has been uploaded successfully."
Else
lbl_Error.Text = "** You must first select a file to upload **"
End If
End Sub
</script>
<script type="text/javascript">
function showWait()
{
if ($get('myFile').value.length > 0)
{
$get('UpdateProgress1').style.display = 'block';
}
}
</script>
Then in the BODY section where you want the upload control you'll need this code:
<form id="form1" runat="server">
<div>
<asp:Label id="lbl_Error" runat="server" ForeColor="Red" Font-Bold="True"></asp:Label>
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
<ContentTemplate>
<br />
<asp:Label ID="Label2" runat="server" Font-Bold="True" Text="Upload a file to the website"></asp:Label><br />
<asp:FileUpload ID="myFile" runat="server" /><br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="UploadFile" OnClientClick="showWait();" />
<br /><br />
<asp:Label ID="lblMsg" runat="server"></asp:Label>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="images/progressbar.gif" /><br />
<asp:Label ID="lblWait" runat="server" BackColor="#0A416B"
Font-Bold="True" ForeColor="White"
Text=" Please wait ... uploading file "></asp:Label>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Again, don't forget that you can call your controls, labels, and functions whatever you want. You can also format the fields any way you need in order to match the site you're working on. Oh...almost forgot...here's the progress bar image I created that will display while the file is uploading. Just right-click and save-as if you want to use mine or make your own if you don't like my dark blue progress bar.
