Building a Gmail Style File Uploading System using ASP.NET 2.0

Introduction
[ Back To Top ] A normal file upload routine consists of a Textbox, browse button and a submit button. Users have to click on the browse button, choose the file that needs to be uploaded and then click the upload button for the actual transfer of file from the client pc to the server. Take a look at the GMail file attachment process in Internet Explorer. If you have paid close attention, the file upload process in GMail during attaching a file in an email has no browse button. All you see is a link called "Attach a file." When you click on the link, the "choose a file" dialog box will be shown. The moment you pick the file and click the button Open, the upload process begins. The two main difference from the usual file upload and the GMail file attachment is that there is no browse button and the submit button. There are mainly three advantages here. First, the user is saving a "mouse click" (no click of submit button). Second, instead of the browse button and the text box, we have a nice hyperlink. This is a better user interface. And third, the upload happens (like a background file transfer) as soon the user clicks the Open button. You too can have this kind of behavior in your web pages. The only catch is that the technique mentioned in this article only works in Internet Explorer. Let us see how this can be done.
More about INPUT HTML Control
[ Back To Top ] <input type=file> when rendered to the browser will result in a browse button and a textbox which holds the selected file. Allow me to explain some of the facts that we should know about the <input type=file> HTML control. First of all, the value property of this control is READ ONLY. Due to browser security threats, we cannot assign a value (File Location in the local PC) to this control using any code. The only way that we can assign a value is by clicking the browse button and selecting the file. Another important aspect about this control is that we cannot invoke/fire the click event for this control. For example, the following code will result in a JavaScript error "Access Denied." Listing 1 <html> <head> <title>File Upload</title> <script language="javascript" type="text/javascript"> function Browse() { document.form1.myFile.click(); document.form1.submit(); } </script> </head> <body onload="javascript:Browse();"> <form id="form1" runat="server"> <input type="file" runat="server" name="myFile" id="myFile"> </form> </body> </html> In the above code I was trying to invoke the click event during the page load. When you run the above code, when the page loads you will get the "Choose File" dialog box. But the moment you click the "Open" button from the dialogbox, the page will generate a client side JavaScript error: - "Access is Denied." The exact statement that caused the error is document.form1.submit();. If GMail can do this, we too can do this. After pondering much and reading many articles on the net, I finally found how to upload files using no browse button. We need to have two pages to perform this kind of upload; one file within an IFRAME tag and another main file.
Using the IFRAME HTML tag
[ Back To Top ] As I have mentioned earlier, we need two ASPX pages to implement this technique. The main ASPX page will have the following: 1) A Hyperlink 2) <IFRAME> HTML tag- Source for this IFRAME will be Upload.aspx And in the Upload.aspx page, we need to have the following: 1) Input type=file HTML control (Visibility should be hidden) 2) Submit button (Again, Visibility should be hidden) When the user clicks on the hyperlink from the main.aspx, we have to show the File Choose dialog box. This can be done by invoking the onclick event for the <input type=file> control which resides in the Upload.aspx. In order to submit the form, we have to fire up the onclick event for the Submit button which is located in the Upload.aspx. This time we will not get any client side JavaScript error. Strange you might think; the same code fails when there is no <IFRAME> involved and the same code works when an <IFRAME> is involved. Confusing …. but it works like a charm! Here is the complete code for Main.aspx. Listing 2 <html> <head> <script type="text/javascript" language="javascript"> function Browse() { var ifUpload; var confirmUpload; ifUpload = frUpload.document.form1; ifUpload.myFile.click(); ifUpload.btnSubmit.click(); } </script> <title>File Upload</title> </head> <body> <form id="form1" runat="server"> <div> <a href="#" OnClick="javascript:Browse();">Attach Files</a> <iframe src="Upload.aspx" frameborder="0" id="ifu" name="ifu"></iframe> </div> </form> </body> </html> Complete code for Upload.aspx is below. Listing 3 <%@ Page Language="C#"%> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (Request.Files.Count == 1) { myFile.PostedFile.SaveAs(Server.MapPath(".") + "//upload//myUploadFile.txt"); } } </script> <html> <head runat="server"> <script type="text/javascript"> function SubmitForm() { // Simply, submit the form document.form1.submit (); } </script> <title>Upload</title> </head> <body> <form id="form1" runat="server"> <div> <input type="file" runat="server" id="myFile" name="myFile" style="visibility:hidden;" /> <input type="button" runat="server" id="btnSubmit" name="btnSubmit" onclick="javascript:SubmitForm();" style="visibility:hidden;" /> <br /><asp:Label ID="lblMsg" runat="server" ForeColor="red" Font-Size="Medium" Font-Bold="true"></asp:Label> </div> </form> </body> </html> If you carefully go through the code listing for Upload.aspx, you will find that the visibility property of Input type=file control and the submit button control is set to “Hidden.” If we set the visibility of these control to visible, then we will see the browse button and the submit button in the Internet Explorer (Browser). We really need these two controls to upload any file to a Server from a Client PC.
How it works?
[ Back To Top ] As you can see from the above code listing (Main.aspx), we have a hyperlink with a text of “Attach files.” The OnClick event for this hyperlink invokes a client side function, “Browse.” Within this browse function we are invoking the OnClick event for the <Input type=file> control (which resides in the Upload.aspx). Once this event is fired, the user will see the File Choose dialog box. After a file has been selected, the control will come back to the Browse function. The next statement that will be fired up will be ifUpload.btnSubmit.click(); this click event will end up executing the statements inside the SubmitForm function from Upload.aspx. Once the form is submitted, you can use server side code to upload the file. Detailed coding for the Upload.aspx can be downloaded at the end of this article. Since this technique will only work in the IE browser, you should make sure that the client’s browser is indeed Internet Explorer. I tested this in a Firefox browser and it did not work for sure.
Live Demo
[ Back To Top ] Click the following link to upload any file to the web server. For security reasons, only text files will be allowed to upload. Please do not upload any sensitive information to the server, since I am providing a hyperlink to download the file so that you can really verify that the upload happened correctly. Upload File Click here to download the file that you just uploaded
Downloads
[ Back To Top ] [Download Sample]
Summary
[ Back To Top ] Well, I hope you enjoyed the article. This technique can be used to implement the file upload process in any web site. Since this method only works with IE, it might be best suited for an Intranet Application. This can also be used in any website, provided you use this code only when the client’s browser is Internet Explorer.

Building a Gmail Style File Uploading System using ASP.NET 2.0

你可能感兴趣的:(File,upload,System,asp.net,Gmail,button)