Image format dropdown when using <input type=“file”>?

2
votes

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

1
jqueryhtmlimageinput
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
I think this link could help you: stackoverflow.com/questions/651700/… – Almeida
The popup is native, meaning it belongs to the OS and can't be changed by the browser/javascript. – adeneo

1 Answers

0
votes

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.