My form has an input file field, and I would like to limit the file type to selecting only images and pdf.
<form>
<input type='file' required>
<input type='submit' name='Enviar'>
</form>
I'm handling the file type in the backend, but I'd like to limit the file type to be selected on the front end.
Just use 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 above example, any image is good.
You could have used image/jpeg , for example, if you wanted to restrict more.
As replied by @DVD, in your case the syntax is this:
<input type='file' required accept="image/*, application/pdf">
Separate the 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:
To accept images and PDF, you can include in the accept attribute the two mime-types separated by comma:
accept="image/*, application/pdf"
Then your input would look like this:
<input type='file' required accept="image/*, application/pdf">
Test:
<form>
<input type='file' required accept="image/*, application/pdf">
<input type='submit' name='Enviar'>
</form>