Clearing the FileUpload Input Field using Javascript

Posted by in ASP.NET category on for Beginner level | Views : 18968 red flag

In the FileUpload Field doesnot provied a way to clear its input the conventional way other controls do.
Clearing the FileUpload Input Field

Clearing the FileUpload Input Field using Javascript
Many a times we come acrros a situation in our projects where we need to reset the input fields when the user have cancels his operation.Now in my case the problem arose when the user who had selected to cancel the file upload operation after having selected the file.

My pecuilar Case
Mine was a peculiar situation where in i had to give the user the control to upload as many as 5 different files to be uploaded according to his will or desire.He may upload any one of it any time he likes.
Now the problem arose when he cancels his upload choice ,because i had given only one button to start upload operation, no matter wheter he had uploaded all or none or any one of the five upload files.
Thus i had to clear the fileupload field for those files which were cancelled by user after selection of file.

I tried various methods without much success 
document.forms[0].FileUploadControl.value = "none";
document.forms[0].FileUploadControl.value = "";
But at that time i came to know that the clearing the fileupload field using javascript was not possible the conventional way.
since You could not set the FileUpload Control's FileName property due to security issues.

But after a lot of workaround i found a way out :-
all you need to do is simply redraw the html block where the input tag for file upload is present.FYI :- i had put all the fileinputcontrols in individual divs like
fileupload11 was in divFileUp1,
lly fileupload11 was in divFileUp2,
So i called the ClearInputFilePath() function on clientclick event of the cancel button of each file,
sending the div id of the individual fileinput fields.
thus in the cancel button of the fileUpload control3,
we send up the div id as paratmeter in ClearInputFilePath()
in the OnClientClick() event;
Code Snippet

 In this case all data will remain the same except the selected file value.

<div id="divFileUp3">
  <asp:FileUpload ID="fileUpload1" runat="server"   />
<asp:Button ID="btnCancelUpload" runat="server"  onclientclick="clearFileInputField(divFileUp3)" Text="Cancel Upload" />
function clearFileInputField(divId)
    document.getElementById(divId).innerHTML =   document.getElementById(tagId).innerHTML;

Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: Sandeep V
Member Level: Starter
Member Status: Member
Member Since: 9/13/2009 10:22:53 PM

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)