In this article, I shall show how to upload files in Gmail style where there is no Upload button, no file upload control. Just a link and thats it!
This article describes how to upload the file using GMail style where there is no FileUpload control, Button control visible to the end user. The user only see the Upload or Attach link. I have created a demo page and my UI looks like below.
In order to show how to achieve GMail style fiile upload, I am using jQuery that you can download from jQuery . com website. To learn about jQuery, read this jQuery tutorials. Below are the steps
Step 1
Create an aspx file named FileUpload.aspx with following code.
<form id="form1" runat="server">
<div>
<div>
<asp:Label ID="lblMessage" runat="server" ForeColor="Green" />
<asp:FileUpload ID="FileUpload1" runat="server" ClientIDMode="Static" style="display:none;" />
<asp:Button ID="btnSubmit" ClientIDMode="Static" runat="server" Text="Submit" OnClick="UploadFileToServer" style="display:none;" />
</div>
</div>
</form>
In the above code, I have placed a Label control, FileUpload control and a Button control. FileUpload and Button is hidden from the user as I have specified css display:none as end user is not going to interact with them directly.
Step 2
Write following code in the code-behind of the FileUpload.aspx file.
protected void UploadFileToServer(object sender, EventArgs e)
{
FileUpload1.SaveAs(Server.MapPath("~/") + FileUpload1.PostedFile.FileName);
lblMessage.Text = FileUpload1.PostedFile.FileName + " uploaded successfully !";
}
There is nothing great about this above code, it is a typical File save code using FileUpload control and have specified the Success message (Do not worry about it as it is anyway not going to be displayed to the user, I had kept it for my testing purpose, you can remove it.)
Get solutions of your .NET problems with video explanations and source code in .NET How to's.
Step 3
Create default.aspx page with following code.
<form id="form1" runat="server">
<div>
<h2>Gmail Style File Upload</h2>
<a href="javascript:void(0)" title="Upload File" onclick="OpenFileUpload()">Upload</a>
<iframe id="frameUpload" name="frameUpload" src="FileUpload.aspx" frameborder="0" width="0" height="0" />
</div>
</form>
In the above code, I have a hyperlink that fires OpenFileUpload() (magic) javascript function when it is clicked. Then I have an iframe whose src is specified to my FileUpload.aspx filename that I had created in Step 1.
Step 4
Now keep following code in between <head> </head>.
<script src="../jquery-1.4.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function OpenFileUpload()
{
var myFrame = document.getElementById('frameUpload');
$(myFrame).focus();
$(myFrame).contents().find("#FileUpload1").click();
var value = $(myFrame).contents().find("#FileUpload1").val();
if ( value != '')
{
$(myFrame).contents().find("#btnSubmit").click();
}
}
</script>
In the above code, first I have referenced my jQuery file and then I have got the reference of the iframe (the page on which it is targetting to, in my case FileUpload.aspx page) frameUpload in myFrame variable. The next line focus on the iframe and then I have tried to find out the FileUpload control from the FileUpload.aspx page and fired the click event using click()function. Once the click event will fire, user will be prompted to select any file to upload. As soon as user will select the file to upload, the very next line will execute.
In the next line, I have tried to get the selected filename and if any file has been selected then have executed the click event of the button (btnSumit) that is hidden in the FileUpload.aspx page. Executing click event of btnSubmit will fire the code behind event that has been explained in the Step 2 above.
Step 5
Thats it !, If you have followed above steps you should be ready to play with it. Run your code and enjoy the GMail style fileuploadn in asp.net.
Source code
I have attached the source code of this article (download from the top), please feel free to download and play with it.
Conclusion
In this article, I have explained how to upload file using GMail style using jQuery and ASP.NET FileUpload control. Hope you like this article, please vote for it if you like this article.
Thank you and keep contributing in the website by writing and sharing your knowledge.