2

I'd like to restrict the type of file that can be chosen from the native OS file chooser when the user clicks the Browse button in the element in HTML. I have a feeling it's impossible, but I'd like to know if there is a solution. I'd like to keep solely to HTML and JavaScript; no Flash please.

Currently, i have
<form:input path="image" type="file" accept="image/*" style="display: none;"/>

And it display like below,

enter image description here

But i need to display like what we have in our mspaint.

enter image description here

Mohan
  • 699
  • 1
  • 11
  • 27
  • 1
    You have to note that OS'es have different way of rendering the dropdown menu for file inputs, so there is likely no single, cross-platform solution using the native file input element. – Terry Oct 14 '16 at 18:23
  • I think this link could help you: http://stackoverflow.com/questions/651700/how-to-have-jquery-restrict-file-types-on-upload – Almeida Oct 14 '16 at 18:24
  • The popup is native, meaning it belongs to the OS and can't be changed by the browser/javascript. – adeneo Oct 14 '16 at 18:34

1 Answers1

0

You can only do something like this

<form:input path="image" type="file" accept="image/gif, image/jpeg, image/png" style="display: none;"/>

But this won't give you the list you're looking for.

Note that this only provides a hint to the browser as to what file-types to display to the user, but this can be easily circumvented, so you should always validate the uploaded file on the server also.

Tim
  • 669
  • 1
  • 8
  • 27