My input file with accepts: accept="image/gif, image/jpg, image/jpeg, image/png", is allowing to select other extensions

Question

I have a form to select images for a gallery, and I want to allow user to select only jpg,gif and png image formats.

And now, for testing, I change extension of a image to .bmp like "image1.bmp", and when I click in my input file to select a image, this "image1.bmp" is hidden, but If I select "show all files", this "image1.bmp" appears, and I can select this "image1.bmp" and send this image in my form. And Im inserting this image with this format on database.

This is normal using accept="image/gif, image/jpg, image/jpeg, image/png"??

Because what I wanted is to block all formats that are not gif,jpg or png.

I have this input file:

<input type="file" name="img[]" multiple="multiple" accept="image/gif, image/jpg, image/jpeg, image/png" />

Answer 1

This is common browser behavior. Browsers that support the accept attribute use it to create an initial file filter, but they do not prevent the user from changing or removing the filter and thereby selecting and submitting any file they like. The purpose of the attribute is to help users select files of appropriate types.

What browsers should do is less clear. HTML 4.01 says that the accept attribute “specifies a comma-separated list of content types that a server processing this form will handle correctly. User agents may use this information to filter out non-conforming files when prompting a user to select files to be sent to the server”. The reference to server-side processing may be misleading. The attribute affects client-side (browser) behavior only. The intent is to say that the attribute value should be written according to what file type(s) are expected from the user; it is more or less self-evident that the server-side form handler should be written so that it is capable of handling the specified type(s).

HTML5 LC is more verbose. It says that the attribute “may be specified to provide user agents with a hint of what file types will be accepted”. It then describes how it could be used by a browser to provide an adequate user interface. It also says: “User agents should prevent the user from selecting files that are not accepted by one (or more) of these tokens.” This might be sensible, but browsers do not actually do that. Even if they did, the attribute would not constitute a security measure of any kind (because a user could edit the form, or write a form of his own, or use a browser that ignores the accept attribute). Its purpose is to protect a normal user from making mistakes, like submitting a file of a type that will be rejected by the server-side handler.

(Browsers interpret the accept attribute value in rather simple way. They work on filename extensions, so if you name a GIF file, or a plain text file, or a binary program file so that its name ends with .png, they will treat it as a PNG image file, instead of inspecting the content of the file. The .bmp extension is problematic, since it commonly means Windows Bitmap, for which there is no registered MIME type; browsers may treat the nonstandard notation image/bmp as corresponding to .bmp.)

You cannot block sending of files. What you can do is to deal with files properly server-side, and there you should not of course rely on filename extensions but detect the types from the file content.

Answer 2

Clearly if you click "show all" can obviously see other files.

Your question is not quite hide or show, but filter at the time of upload, you have two solutions:

1) SERVER-SIDE: With php (just an example) and regExp:

if (preg_match('#^image\/(png|)$#', $_FILES[$i]['img']['type']) === false) {
    echo 'Invalid extension!';
} else {
    //Save file
}

2) CLIENTE-SIDE: With javascript use determinater lib:

https://github.com/rnicholus/determinater