Search
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Articles Author
Sat, 01-Nov-2014 Authors
All Time Authors
Sourav.Kayal
39750
Sheonarayan
38050
Niladri.Biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads
 Article

Clearing the FileUpload Input Field using Javascript

Sandeepv
Posted by under ASP.NET category on for Beginner level | Views : 11910 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.
In asp.net 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 
like
document.forms[0].FileUploadControl.value = "none";
or
document.forms[0].FileUploadControl.value = "";
etc.
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"   />
</div>
<asp:Button ID="btnCancelUpload" runat="server"  onclientclick="clearFileInputField(divFileUp3)" Text="Cancel Upload" />
<script>
function clearFileInputField(divId)
 {
    document.getElementById(divId).innerHTML =   document.getElementById(tagId).innerHTML;
}
</script>

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

Sandeepv

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

Login to vote for this post.
Found interesting? Add this to:


Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)