- Belgium
- Bought between 10 and 49 items
- Exclusive Author
- Has been a member for 3-4 years
- Sold between 100 and 1 000 dollars
Hi,
I have this form where a user can upload certain file types, for example *.jpg, *.png. Now when a user uploads a *.pdf file it get’s an error on submit. What I want now it to restrict the possibility to select other file types then *.jpg and *.png, so when you have the window to select the files you can’t select files other then *.jpg and *.png.
I know that this is possible in Javascript or other, but don’t know how to accomplish it. Anyone had to do this before?
Thanks!
- Sold between 10 000 and 50 000 dollars
- Author was Featured
- Contributed a Tutorial to a Tuts+ Site
- Referred between 1000 and 1999 users
- Bought between 10 and 49 items
- Repeatedly Helped protect Envato Marketplaces against copyright violations
- Has been a member for 2-3 years
- Exclusive Author
- Czech Republic
As far as I know, it is not possible to upload PDF . Why are You uploading PDF ? Image preview should be jpg or png image and other files which customer will download must be in ZIP format.
- Author was Featured
- Sold between 10 000 and 50 000 dollars
- Bought between 10 and 49 items
- Has been a member for 3-4 years
- Referred between 10 and 49 users
- Exclusive Author
- Germany
It is not possible to restict the browsers file chooser to certain file types via html or javascript. However, there are tools like Uploadify, which replace the html file input with a flash control, which is able to restrict the file control to certain types.
Hope that helps!
- Belgium
- Bought between 10 and 49 items
- Exclusive Author
- Has been a member for 3-4 years
- Sold between 100 and 1 000 dollars
JonasDoebertin said
It is not possible to restict the browsers file chooser to certain file types via html or javascript. However, there are tools like Uploadify, which replace the html file input with a flash control, which is able to restrict the file control to certain types. Hope that helps!
Hmm, not really a fan of flash, I’ll check into it, but if there’s another way then the flash uploader I down with that 
- Canada
- Sold between 1 000 and 5 000 dollars
- Has been a member for 4-5 years
- Exclusive Author
- Bought between 10 and 49 items
- Referred between 1 and 9 users
I haven’t tried this but have you looked into the onchange event?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
function checkFileExtension(ele){
var filename = $(ele).val();
var extension = filename.split('.').pop();
console.log(extension);
if(extension != 'jpg' && extension != 'jpeg'){
alert('Please only include JPG or JPEG images');
}
}
</script>
</head>
<body>
<input onchange="checkFileExtension(this);" type="file" />
</body>
</html>
I have read some people saying it isn’t working in IE. I tried IE 9 and it pulled up what it was suppose to.
- Edited because they really need to fix the code tag
- Attended a Community Meetup
- Author was Featured
- Beta Tester
- Bought between 10 and 49 items
- Contributed a Tutorial to a Tuts+ Site
- Exclusive Author
- Has been a member for 3-4 years
- Interviewed on the Envato Notes blog
Try ajaxupload.
- Bought between 10 and 49 items
- Contributed a Blog Post
- Contributed a Tutorial to a Tuts+ Site
- Exclusive Author
- Has been a member for 4-5 years
- Item was Featured
- Microlancer Beta Tester
- Referred between 100 and 199 users
- Sold between 10 000 and 50 000 dollars
JonasDoebertin said
It is not possible to restict the browsers file chooser to certain file types via html or javascript. However, there are tools like Uploadify, which replace the html file input with a flash control, which is able to restrict the file control to certain types. Hope that helps!
What makes you certain of that? When you select a file for upload, it like entering a user input. User input can be validated with JavaScript. It’s a little bit tricky, though. I remember an article and a script that exactly does that, and it has AJAX upload (no page refresh). I just can’t remember the page.
- Author was Featured
- Sold between 10 000 and 50 000 dollars
- Bought between 10 and 49 items
- Has been a member for 3-4 years
- Referred between 10 and 49 users
- Exclusive Author
- Germany
omarabid said
What makes you certain of that? When you select a file for upload, it like entering a user input. User input can be validated with JavaScript. It’s a little bit tricky, though. I remember an article and a script that exactly does that, and it has AJAX upload (no page refresh). I just can’t remember the page.
Of course you can validate the selected file with javascript and throw an error on unallowed extensions, for example. But, what I was trying to say is, that you cannot tell the browser to let the user select only certain file types in the browsers/os “browse for file” dialog. Also, you have to be aware that validating file extensions via javascript is not safe and can be surpassed. So you have to do a server side validation as well.
Request processing...