4

I am using a HTML form to upload image files. Now i am using server side validation to allow the file types. But i want to validate it in client side as well. I have seen in some websites which greys out other file types when we are choosing the file. I think that is a cool option. When i was walking through google i found this 

<input id="my_file_element" type="file" name="file_0" accept="image/*">

But with this i am getting "All Files" option so tat i can enable other files as well. I don't need that. No matter what happens the user should be allowed to select only images files from their computer. Do you guys know a way to do this ?

This is what i meant by greying out. enter image description here

Improve this question
6
  • I tried it in Firefox and it's working corectly there. What browser are you using? Commented Jan 4, 2012 at 20:52
  • You could use javascript to check the extension on the file form. I'd give you some code but I suck at javascript. Maybe jQuery would work, if you prefer that. Commented Jan 4, 2012 at 20:56
  • @dotweb:i am using Google Chrome.. in firefox can u use "all files" option and choose other files ? Commented Jan 4, 2012 at 20:56
  • @Different55 i am using javascript or jQuery can i stop user from clicking on non image files ?? because thats wat i want.. non image files should be greyed out when they open the file chooser!! Commented Jan 4, 2012 at 20:58
  • Yep, I can choose between image files and all files. Commented Jan 4, 2012 at 21:01

2 Answers 2

Reset to default
3

This accept attribute is a HTML5 feature and so is unsupported by a lot of browsers.

I'm afraid that, as long as I remember, the only other way to get a better file upload dialog (filetype filters, multiple files...) is to use a Flash object.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Can you check my edit ?? I have uploaded an image of how it should look. I think they are not using flash here coz the interface is from MAC and not flash. am i rite ?
1 
Here is the HTML for image upload, By default it will show image files only in browsing window becauase we have put accept="image/*" . But still we can change it from the dropdown and it will show all files. So the Javascript part validates whether the selected file is an actual image or not. <div class="col-sm-8 img-upload-section"> <input name="image3" type="file" accept="image/*" id="menu_images"/> <img id="menu_image" class="preview_img" /> <input type="submit" value="Submit" /> </div> Here on the change event first we are checking the size of the image. And in the second if condition we are checking whether it is an image file or not. this.files[0].type.indexOf("image") will be "-1" if it is not an image file. document.getElementById("menu_images").onchange = function () { var reader = new FileReader(); if(this.files[0].size>528385){ alert("Image Size should not be greater than 500Kb"); $("#menu_image").attr("src","blank"); $("#menu_image").hide(); $('#menu_images').wrap('<form>').closest('form').get(0).reset(); $('#menu_images').unwrap(); return false; } if(this.files[0].type.indexOf("image")==-1){ alert("Invalid Type"); $("#menu_image").attr("src","blank"); $("#menu_image").hide(); $('#menu_images').wrap('<form>').closest('form').get(0).reset(); $('#menu_images').unwrap(); return false; } reader.onload = function (e) { // get loaded data and render thumbnail. document.getElementById("menu_image").src = e.target.result; $("#menu_image").show(); }; // read the image file as a data URL. reader.readAsDataURL(this.files[0]); };
Improve this answer

1 Comment

Although this code may be help to solve the problem, providing additional context regarding why and/or how it answers the question would significantly improve its long-term value. Please edit your answer to add some explanation.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.