In this article, I shall show how to beign the file upload process without user explicitely clicking the Upload button.
Introduction
Today there was a post in the DotNetFunda.Com Forums http://www.dotnetfunda.com/forums/thread2865-fileupload-control-postback.aspx and the author wanted to upload the file without user explicitely clicking the Submit button.
This seems promising to me and decided to work for the solution, I tried several ways to do that using normal JavaScript but as soon as I was trying to submit the form using JavaScript, I was getting "htmlfile: Access is denied.", I tried the approach that was written in one of the article the article http://aspalliance.com/ 1441_Building_a_Gmail_Style_File_Uploading_System_using_ASPNET_20 .all but unfortunately that didn't work for me, let me know if it worked for you.
Ultimately, I found the solution and here is the solution. I shall show it in step wise from scratch so that it will be easy to understand and implement.
Step 1
Create an aspx file with following code snippet. In this code snippet, I have a label control that will be used to write the success message. A FileUpload control and have specified onchange (UploadFileNow()) event where I will handle the request when a user will select the file.
<form id="form1" runat="server">
<div>
<h2>Upload file without Submit button</h2>
<asp:Label ID="lblMessage" runat="server" ForeColor="Green" />
Select file and upload will start automatically
<p><asp:FileUpload ID="FileUpload2" runat="server" ClientIDMode="Static" onchange="UploadFileNow()" /></p>
</div>
</form>
Step 2
Keep following JavaScript between the <head> </head> tag. Notice that I have used jQuery so make sure that you have downloaded the jQuery file from jQuery . com website and referenced in your page.
<script src="../jquery-1.4.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function UploadFileNow() {
var value = $("#FileUpload2").val();
if (value != '') {
$("#form1").submit();
}
};
</script>
Get solutions of your .NET problems with video explanations, .pdf and source code in .NET How to's.
What's happening in the UploadFileNow() function?. Its simple, as soon as the user will select the file by clicking on the FileUpload control, this JavaScript function will fire. First it will check for the value to make sure that user has selected something else we do not want to submit the form to upload file.
Now if user has selected file and my value variable is not empty, then submitted the form. As soon as the form will be submitted, we have to catch the event so here is the code for the code behind page.
Step 3
Write following code in the code behind. Here I have checked that my file upload code executes only if it is PostBack by user and some file has been selected in the FiileUpload control and then have written typical file upload code.
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack && FileUpload2.PostedFile != null)
{
if (FileUpload2.PostedFile.FileName.Length > 0)
{
FileUpload2.SaveAs(Server.MapPath("~/") + FileUpload2.PostedFile.FileName);
lblMessage.Text = FileUpload2.PostedFile.FileName + " uploaded successfully !";
}
}
}
Is something left? No, you are done !
Conclusion
For those, who want to play with this code, I have attached the sample file used to describe this "upload file without clicking button" article so download it and play with it! Thank you for reading and enjoy!
I am going to post another great article on FileUpload soon so stay tune.