• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1199
  • Last Modified:

FileUpload Control with javascript

Dear Friend,

i want to check the extension of the file when the user select the file by using the FileUpload control

i have javascript but i want it to call when the user select the file and after click on the open button.

so how can i call to javascript when the user select the file.


1 Solution
Ivo StoykovCommented:
if(document.selectElementById('your_file_field_id).value.lastIndexOf('txt') < 0)
alert('not found')
Ivo Stoykov
i think this cannot be done with simple FILEUPLOAD control, you need to create a usercontrol which inhertis the fileupload control and perform client script actions.
I'm not proud of it, but you can do this kind of thing (see snippet). Basically use the onclick event for FF and onpropertychange for IE. In conjunction they allow you access to the value when the "Open" button is clicked (which is exactly what you asked for).

I don't see the point though! I mean look the <input type="file" /> is supposed to be locked down for security reasons you just shouldn't be able to easily mess with it. Frankly I'm glad it is, or someone could cause grief.

So you have access to the file extension when the "Open" button is clicked. I don't see what this gains you over just checking the value when the upload button is clicked?! Even though you have the file extension when the "Open" button is clicked there is nothing you can do about it except inform them to select again (which you could have done with the other button for uploading anyway). In FF you can empty the value out, but in IE you cant (at least I dunno how) so ....what's the point? Maybe you have something in mind beyond where I'm thinking? Dunno, s'all right!

My fallback answer is "You can't do that! And you're not supposed to do that!
<input type="file" id="upFile" onclick="fileCheck();" onpropertychange="fileCheck();" />		
function fileCheck()
	var upfile = document.getElementById('upFile');
	if(upfile.value.length != 0)
		var fileName = upfile.value.substring(upfile.value.lastIndexOf('\\')+1);
		var ext = fileName.substring(fileName.indexOf('.'));
		if(ext != '.png') //could be any extension, or checked in differnt way
			//do something 

Open in new window

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

virafhAuthor Commented:
thankx ddayx10

your script is working
 now i just want to blank the fileUpload textbox

how can i ?
virafhAuthor Commented:
Thank You :)
virafhAuthor Commented:
in firefox its not working


if you know the solution please let me know

virafhAuthor Commented:

buddy i solved it, instead of onpropertychange i using onchange

thankx all of you
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now