JS for FileField Upload

@DJ_MooreFeb 26.2003

I am looking to search the extensions of a FileField upload to notify user if they are trying to upload an incorrect file type. The Script would check the extension to see if it was a .gif, .jpg. or .pdf before allowing Form to be processed. If it wer anything else, it would alert the user and stop the process. Is there a way to check the FileSize as well, or will I have to do both of these functions after the form is submitted?

Any and all suggestions would be appreciated

to post a comment

JavaScript

12 Comments(s) _↴

@CharlesFeb 26.2003 — #[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<form action="someScript.pl">

<div>

<input type="file" onchange="if (!/(.png)|(.gif)|(.jpg)|(.pdf)$/i.test(this.value)) alert('That does not appear to be a valid file type')">

<br>

<input type="submit">

<div>

</form>[/font]

[font=georgia]Like all JavaScript, that will fail quite often - in this case, about 12% of the time. So you will need to double up the file type validation server side. You will also need to validate the file size server side.[/font]

@DJ_MooreauthorFeb 26.2003 — #That did work! Is there any way to remove the content that is in the field. I think it is called the Focus()? And yes, I am a way JS Novice.

@CharlesFeb 26.2003 — #[font=georgia]It's a peculiarity and a security feature of the file upload control that you cannot assign a value to it using JavaScript. But you can reset the form itself. And note, I've changed the regular expression here to allow for 'jpeg' extensions. Note also that these are case insensitive.[/font]

[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<form action="someScript.pl" name="upload">

<div>

<input type="file" onchange="if (!/(.png)|(.gif)|(.jpe?g)|(.pdf)$/i.test(this.value)) {alert('That does not appear to be a valid file type'); document.upload.reset()}">

<br>

<input type="submit">

<div>

</form>[/font]

@DJ_MooreauthorFeb 26.2003 — #Pure brilliance. That did it! Thank you for your help. Now, if there was only a way to check the file size.... I guess I am asking too much. Dare to dream the impossible dream?

@DJ_MooreauthorFeb 27.2003 — #Is there a way to add CGI.CONTENT_LENGTH in the Javascript to check the file size?

@DJ_MooreauthorFeb 27.2003 — #Come on. Don't give up on me now? Use the force. I mean, you are a JS Master! Where's Luke Skywalker when you need him?

Just kidding. Thanks Dave. Maybe Charles or someone else has an idea? Either way, this has been very helpful. I posted the answer in a Cold Fusion forum last night and it got snapped up by a lot of people.

DJ Moore

(In my previous life...er, I mean career,... I was a Radio Announcer. Building websites is too much like work. You brainy guys are very helpful!)

@CharlesFeb 27.2003 — #[font=georgia]For security reasons limits are placed upon scripts that run in browsers. You cannot go exploring what's on people's hard drives and you cannot know the size of a file before it is uploaded. But as I mentioned, a great number of people do not use JavaScript. You will need to double check your file types at the server anyway, so check the file size there.[/font]

@DJ_MooreauthorFeb 27.2003 — #Charles,

Thank you for your comments. I greatly appreciate your insight. I guess I should explain that this is for a Private, Client site. I require the client to use IE and have Javascript enabled.

The site is used to allow clients to update their websites and manage certain aspects. What I am trying to do here is prevent a client from uploading a .doc file when it should be a .jpg. (even though, right next to the field it says .jpg or .gif files only. 1MB Max.) and I have instructed them on what they can and can't upload. It never fails, someone trys to upload the wrong file and I get a server that locks up.

So, in a sense, I have the right to explore their hard drive to make sure the file size is not too great. It is for their protection and mine. If this helps and you know something that would help, I would appreciate it. Otherwise, I am working on some server side testing. I use ColdFusion.

Once again, thank you!

DJ Moore

@CharlesFeb 27.2003 — #[font=georgia]Your good intentions do not change the way browsers are written.

And if you are charging for this service or if you have 15 or more employees that will use this service then no, you do not have the right to force your users to use MSIE with scripting turned on. In the United States, where I note that you are, employment is regulated by Title I and commerce by Title II of the Americans with Disabilities Act (http://www.usdoj.gov/crt/ada/pubs/ada.txt). And the Department of Justice holds that the ADA does apply to the internet and any other form of electronic media (http://www.usdoj.gov/crt/foia/tal712.txt).[/font]

@DJ_MooreauthorFeb 27.2003 — #Charles,

Once again, thank you for your insite. The reason I require the client to use IE is that the Online Editor I use will only run in an IE environment. Plus, some of the CSS will only work in IE. So, if the client wants to edit their website, they have to use IE. It's not really a public website.

Well, I do appreciate your words of wisdom and will look into the information you sent. I am glad that the latest version of Netscape applies to some of the CSS I use and I understand the CF Editor I use is going to soon be available in some type of universal code. This will hopefully allow me to open up to other Browser platforms.

I will continue to build some server-side checks and move on. I hope you have a great day. And for all of us non-techical, javascript illiterate, forced-into-the-business developers - I thank you!

DJ Moore

@NedalsFeb 28.2003 — #Here's a thought on how your might stop people uploading very large images. It's not perfect but could protect againt extreme abuse.

onSubmit you could write the image to a javascript variable and then get the height and width of the image. From this you can decide a maximium acceptable area. I know you can do this with some versions of IE. Perhape Dave or Charles will let you know the limitations.

@DJ_MooreauthorFeb 28.2003 — #Thanks everyone,

I will try some of these suggestions. If I come up with something that works, I will post it here...unless someone else figures it out first.

DJ Moore

__________________________________

- Move a Mountain Today. Have a little faith! -

Also in #JavaScript _↴

Variables into onclick Changing format of Text Box ?Old JS Styleswitcher not working

Success!

Help @DJ_Moore spread the word by sharing this article on Twitter...

Tweet This

JS for FileField Upload

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

JS for FileField Upload

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴