43

Possible Duplicate:
Limit file format when using <input type=“file”>?

I need to use the HTML5 pattern attribute to only allow JPG, GIF and PNG files in a <input type="file"> element.

I currently have this pattern, but it is not working:

<input type="file" class="input-file" id="tbinstUploadFile0" name="tbinstUploadFile0" placeholder="Please insert an image file..." pattern="([^\s]+(\.(?i)(jpg|png|gif|bmp))$)">

This regex pattern is not compatible with HTML5? How can I test for valid HTML5 regex patterns?

Dharman
  • 30,962
  • 25
  • 85
  • 135
André
  • 24,706
  • 43
  • 121
  • 178
  • 2
    See accept in HTML5 spec: http://dev.w3.org/html5/spec/states-of-the-type-attribute.html#attr-input-accept – Qtax Jun 19 '12 at 08:37

1 Answers1

85

Try something like

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

Click here for the latest browser compatibility table

Live demo here

To select only image files, you can use this accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

Live demo here

Only gif, jpg and png will be shown, screen grab from Chrome version 44 Only gif, jpg and png will be shown, screen grab from Chrome version 44

kiranvj
  • 32,342
  • 7
  • 71
  • 76
  • It is not supported in Firefox 12. Thanks by the reply. – André Jun 19 '12 at 11:36
  • 2
    only works in Chrome as per end 2013. – Rudy Oct 18 '13 at 06:00
  • 2
    If I am adding this(`accept="image/jpg, image/jpeg, image/png"`) to `input` tag, it's showing me all file types in Firefox, where as if I just keep `accept="image/*"`, it works. I just want the user to select `jpg, jpeg` and `png` format. – Sahil Jan 05 '16 at 07:36
  • Custom Files can change to All files then it shows all files such as image,txt file,pdf etc. I suggest validated it using java script in client site then server site script before processing. Demo: http://www.codestore.net/store.nsf/unid/DOMM-4Q8H9E/ – Kabir Hossain Feb 14 '18 at 03:27
  • why its not working for only image/jpg ?? – santoshe61 Apr 14 '19 at 16:12
  • @santosh Did you try `accept="image/*"` ? – kiranvj Apr 16 '19 at 07:15
  • @kiranvj but i want only .jpg format image to be uploaded...... – santoshe61 Apr 17 '19 at 04:54
  • @santosh `` should work only for jpg. – kiranvj Apr 18 '19 at 02:22
  • Something like this is not secure and someone with enough knowledge to Inspect Element and remove the attribute accept will be able to upload malicious files to your webserver. First do the proper filetype checking on the backend and THEN do it on client side. –  Apr 24 '19 at 03:10
  • 2
    @NurudinImsirovic First on client side (as thats where the usecase starts) then on server. Whatever you do on client side can be bypassed. You dont need console for selecting all files, Just change the custom files to All files in upload file dialogm, that will show all files.Extension and mime type validation has to be done in server side. – kiranvj Apr 25 '19 at 02:03
  • 1
    @kiranvj Agree! I did not even notice there is "All files" this already exposes a lot of bad things (on Windows) I don't know about Linux but It's probably bound to the OS anyways.. But yes, extension and mime type validation has to be done in server side. 100% true! –  Apr 25 '19 at 08:10
  • @kiranvj `` this wasnt working thats why i have asked. – santoshe61 May 12 '19 at 04:59
  • @santosh try image/jpeg – kiranvj May 13 '19 at 03:21