Search
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Articles Author
Thu, 28-Aug-2014 Authors
All Time Authors
Sourav.Kayal
39750
Sheonarayan
37300
Niladri.Biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads
 Article

Gmail style file upload in ASP.NET

SheoNarayan
Posted by under ASP.NET category on for Intermediate level | Points: 250 | Views : 73399 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
Rating: 3.67 out of 5
3 vote(s)
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!

 Download source code for Gmail style file upload in ASP.NET


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.

Page copy protected against web site content infringement by Copyscape
About the Author

SheoNarayan

Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Microsoft_MVP,Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com

Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan
Login to vote for this post.
Found interesting? Add this to:


Comments or Responses

Posted by: Ray.chayan on: 11/13/2010 | Points: 25

Hi Sheo,
Nice post and it is working very fine. But I can't print the success message. i.e. I can't show the lblMessage control. Please help me to show this..

Chayan

Posted by: SheoNarayan on: 11/18/2010 | Points: 25

Hi Ray.chayan,

I do not have code ready for you however you place a html label on the default.aspx page and can try to access the it from FileUpload.aspx by writing JavaScript code after file upload success. Look for accessing parent window from iframe and you will get the solution.

Something like below

this.parent.document.getElementbyId('label).InnerHTML = "Success";


Hope this will help.

Thanks

Posted by: Praveen7k on: 3/12/2011 | Points: 25

Thanks dude...it helped me much

HI
I have 2 user controls
uc1.ascx--contains Textbox, submit, Cancel buttons
uc2.ascx--contains Textbox,file Upload control, Submit,Cancel buttons

I have to uc1.ascx into default.aspx
in default.aspx When i click 'Submit' button it should open uc2.ascx as Popup using JQuery dialog

In the Popup first time 'Submit' button should be disabled as the user enters text into the textbox
the button is enabled.
using FileUpload control attaches files once attached the attached file name, a Remove button should appear below the fileUpload Control. Where 'Remove' is to remove the file.
If user clicks on the name of file name it should open in a separate window.

Here user can attach only 10 files. Try to use JQuery dialog,usercontrol or any other way


Posted by: Ashuthinks on: 11/30/2011 | Points: 25

nice article but what about multiple file upload please help.
-ashuthinks

Posted by: Sidduhussain on: 5/6/2012 | Points: 25

hi Sheo

nice article
but i got a problem while implementing it as per my need

here is code i changed

defalut.aspx
<script language="javascript" type="text/javascript">
function OpenFileUpload() {
$("#FileUpload1").click();
var value = $("#FileUpload1").val();
if (value != '') {
var butt = document.getElementById('btnSubmit');
$(butt).click();
}
}
</script>

<h2>Gmail Style File Upload</h2>
<a href="javascript:void(0)" title="Upload File" onclick="OpenFileUpload()">Upload</a>
<div id="maindiv">
<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" />
</div>

now in default.aspx.cs
i wrote UploadFileToServer


now the problem is i am not able to call UploadFileToServer on button click

it will go into it if I comment // $("#FileUpload1").click();

can you please look into it and help me

in short i want to removed Fileupload.aspx and kept everything in default .aspx

Posted by: Ksyinc on: 8/30/2012 | Points: 25

This works great in IE but not in Firefox.

The problem is with these two lines
1 var value = $(myFrame).contents().find("#FileUpload1").val();
2 if ( value != '')

I think IE waits for you to choose a file before going to line 2.
Firefox does not so it think the value is blank because you have not chosen a file yet.

Here is what is funny. after you choose a file nothing happens. But if you click on the upload file button then it uplaods the last file you selected the last time you click the upload button.
Try it.

Posted by: Moniquek on: 9/4/2012 | Points: 25

We have the same problem with Firefox as described by Ksyinc in our application.

Is there a solution for this problem yet?

Thanks in advance.

Login to post response

Comment using Facebook(Author doesn't get notification)