Search code examples
htmlhtml-input

HTML file upload accept and reject file extensions


I was confused for not finding an answer online for this question.

ISSUE:

I am using the html input (type='file') to select files for attaching to messages. But I want to limit it to allow uploading of images and documents only. I know that there is an accept attribute. But for what I know we can limit it to accept images by passing image/*. But I don't think there is a similar limiter for documents. But I can add individual extensions that I want to allow. I also want to completely reject files with extensions *.exe and *.app.

QUESTION:

My question is that is there a limiter similar to images limiter that I might be missing. Or if I add individual extensions of file types I want to allow what extensions I would have to add (keeping in mind that the users use this service on Windows, Mac and Linux).

NOTE: I am trying to not involve js/jquery for this purpose.

Regards


Solution

  • For modern browsers you can use accept on an input element, you will have to add all the files you can accept and leave out the ones you reject. With just HTML this is all you can do, but it is easy to reject if you for example used JavaScript, PHP, etc. Since HTML is not a programming language what you can and can't do is rather limited.

    <input type="file" accept="[everything but .exe and .app]">
    

    As you mentioned you are going to have to place a good amount of files here. Unfortunately as of right now there is no reject attribute you can add.

    Note: For support in order browsers you are going to need to use JavaScript or another programming language to check the input of the file. Otherwise from what I shown above is all you can do in just HTML.

    I would recommend just buckling down and using JavaScript to check, it will be easier that way.