# How to make sure your input field can only upload images

> Learn how to restrict a file input to images only using the HTML accept attribute with values like image/* or image/png, and why you validate server-side too.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2022-06-03 | Topics: [HTML](https://flaviocopes.com/tags/html/) | Canonical: https://flaviocopes.com/how-to-accept-only-images-input-file/

I had the need to have a file upload for images, so I added my little `input type="file"` field:

```html
<input type="file">
```

I only wanted images to be allowed to be uploaded by the browser.

It's a common thing, but I always forget how to do it.

Use the `accept` attribute and pass `image/*` to allow all images:

```html
<input type="file" accept="image/*">
```

Or `image/png` to only accept PNG images:

```html
<input type="file" accept="image/png">
```

The same syntax can be done to only accept videos:

```html
<input type="file" accept="video/*">
```

or audio:

```html
<input type="file" accept="audio/*">
```

Or a combination of them:

```html
<input type="file" accept="image/*,audio/*,video/*">
```

Oh common thing - add `multiple` to allow uploading more than one:


```html
<input type="file" multiple accept="image/*">
```

Of course this is only client-side validation, and you should also validate the mime type on the server when you receive the files.