Input limiting file type

Question

My form has an input file field, and would like to limit the file type to select only images and pdf.

<form>
<input type='file' required>
<input type='submit' name='Enviar'>
</form>

I’m treating the file type in the back-end, but would like to limit the file type to be selected in the front-end.

Answer 1

Just use the accept:

<form action="/action_page.php">
  <input type="file" name="pic" accept="image/*">
  <input type="submit">
</form> 

To determine the type, you need to know a little about Mime-Types. In the example above, any image serves.

Could have used image/jpeg, for example, if you wanted to restrict more.

As answered by @DVD, in your case the syntax is this:

<input type='file' required accept="image/*, application/pdf">

Separating desired types by comma.

Basic examples:

text/plain
text/html
image/jpeg
image/png
audio/mpeg
audio/ogg
audio/*
video/mp4
application/octet-stream

Learn more about Mime-Types here:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basico_sobre_HTTP/MIME_types

Answer 2

To accept images and PDF, you can include in the attribute accept the two mime-types separated by comma:

accept="image/*, application/pdf"

So your input would look like this:

<input type='file' required accept="image/*, application/pdf">

Testing:

<form>
<input type='file' required accept="image/*, application/pdf">
<input type='submit' name='Enviar'>
</form>