Jump to content

Setting File Types in Upload Box


calvin182

Recommended Posts

I have an upload form so users can upload images. But instead of it saying "All file types" in the file type drop-down, is there any way to make it show only images?

You can use accept attribute, but depends of browser how it works or works it at all.Types are mime types:<input type="file" accept="image/gif,image/jpeg,image/png">That will work with Opera (L9/241), but not in Firefox (1.5.0.2). http://www.w3.org/TR/html4/interact/forms.html#adef-accept"User agents may use this information to filter out non-conforming files.."I think You should first filter not accepted files with Javascript on client side, and then again in server side to be sure only image files can be uploaded.
Link to comment
Share on other sites

ahh, I've tried that before and got no results but I'm a FireFox user so I see. What do you mean by filtering client side with javascript then server side? How would I do something like that?

You can't do it with that upload dialog (with Opera You can) so You must do filteringafter user has selected file, but not uploaded it yet.I mean filtering files so that nothing else can't be uploaded than images.Check at selected file ext is valid image-file extension, first with javascript in client side.And then do the same filtering in server side: look the extension of file and block out all incoming files except *.jpg, *.gif, *.png. This way user can be warned before upload with "GRRR! images only can be uploaded!" javascript alert, and You can get wrong filetype upload canceled before upload. (via returning false to form onsubmit event).
Link to comment
Share on other sites

thanks! ill search google for some javascript to do that

Here is one, my selfmade :)
<script type="text/javascript"><!--function checkExt(s){if (!s) return false;var OK = false;var accept = new Array("jpg", "png", "gif");;var tmp = s.split('.'); if (accept.indexOf(tmp[1].toLowerCase()) > -1) OK = true; if (!OK) alert('Accepted files are: ' + accept); return OK;}//--></script><form action="some.php" onsubmit="return checkExt(this.file1.value)" enctype="multipart/form-data"><input type="file" name="file1" /><input type="submit" value="Upload  file" /></form>

Link to comment
Share on other sites

cool, thanks a bunch!

:) thanks. here is updated version (always must be a updated version) :)Now they can't send files without extension:
function checkExt(s){if (!s) return false;var OK = false;var accept = new Array("jpg", "png", "gif");;var tmp = s.split('.'); if (!tmp[tmp.length - 1]) OK = false else for (var i = 0; i < accept.length; i++) if (accept[i].indexOf(tmp[tmp.length - 1].toLowerCase()) > -1) OK = true; if (!OK) alert('Accepted files are: ' + accept); return OK;}

edit:fixed to the final version. :)

Edited by raimo
Link to comment
Share on other sites

If you are only worried about images, the safest way is to check through PHP. You can use the getimagesize function to get information about the file. It supports these types:GIF, JPG, PNG, SWF, SWC, PSD, TIFF, BMP, IFF, JP2, JPX, JB2, JPC, XBM, or WBMPThe return value of getimagesize is an array containing this info:width (pixels)height (pixels)typewidth="xxx" height="xxx" html attribute string for <img> tagMake sure you read the documentation page. The type is given as a number 1=GIF, 2=JPG, etc. Check out the doc for details.The advantage to doing this check in PHP is that 1) it doesn't rely on the file extension, it looks at the contents of the file and determines what type it is and 2) even if you turn off javascript the check will still take place. The disadvantage is that the file upload has to take place before the check, so the user may have to wait for the upload to find out that there is a problem with the file. But if you put the list of accepted types on the upload page, then that's their fault anyway.

Link to comment
Share on other sites

The disadvantage is that the file upload has to take place before the check, so the user may have to wait for the upload to find out that there is a problem with the file.  But if you put the list of accepted types on the upload page, then that's their fault anyway.

For that reason I'd first check in client side with javascript, before uploading,and cancel upload if wrong files are tried to upload.And then check it (and filesize) again in server side with PHP (or in my case with beutiful Perl)It is userfriendly way to do upload, no wasted time if filetype is mistakely wrong.Calvin: can't see why it is not working. I'd tested it with firefox.But anyway there is many good scripts in Googles head. :) .Remember form enctype: enctype="multipart/form-data" it must be that in file upload.
Link to comment
Share on other sites

here's what I got:

<form enctype="multipart/form-data" action="upload.php" method="POST" onsubmit="return checkExt(this.userfile.value)><script type="text/javascript">function checkExt(s){if (!s) return false;var OK = false;var accept = new Array("jpg", "jpeg", "png");;var tmp = s.split('.');if (!tmp[1]) OK = falseelse if (accept.indexOf(tmp[1].toLowerCase()) > -1) OK = true;if (!OK) alert('Accepted files are: ' + accept);return OK;}</script>

   <input type="hidden" name="MAX_FILE_SIZE" value="2097152" />   <input name="uploaddirectory" type="hidden" value="<?php echo "$path"; ?>" size="50"/>   <input name="userfile" type="file" size="50"/><br/>   <input type="submit" value="Add to gallery" /></form>

Link to comment
Share on other sites

here's what I got:

.. onsubmit="return checkExt(this.userfile.value)> ..last " is missing there, should be:onsubmit="return checkExt(this.userfile.value)">that's the reason it not working I quess.Please put javascript block into the head part of Your document.By the way, here is final version, :) fixed to work with Opera, and filenames as file.is.this.png can be used too.
function checkExt(s){if (!s) return false;var OK = false;var accept = new Array("jpg", "png", "gif");;var tmp = s.split('.'); if (!tmp[tmp.length - 1]) OK = false else for (var i = 0; i < accept.length; i++) if (accept[i].indexOf(tmp[tmp.length - 1].toLowerCase()) > -1) OK = true; if (!OK) alert('Accepted files are: ' + accept); return OK;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...