---
name: File Upload
menu: Patterns
parent: Modules
route: /patterns/file-upload
---

# File Upload

File upload helps users select and upload a file.

It consists of File Input and File Handler.

## File Input

File Input triggers the file browser, allowing the user to select a file from their hard drive.

```specimen-react
<FileInput label='Upload Files Here' accept='image/*' onChange={e => console.log(e.target.value)} aria-label='file upload example'/>
```

## File handler

File handler is used to show the image name, a preview (if available), upload progress, error message and gives the option to remove the file once it’s uploaded.

### States

#### Uploading File Handle with a normal file name

```specimen-react
<FileHandler filename="meterpoint.png" status="uploading">
</FileHandler>
```

#### Uploading File Handle with a very long file name

```specimen-react
<FileHandler filename="averylongfilenamewithanextension.jpeg" status="uploading">
</FileHandler>
```

#### Upload complete state with a Close button

```specimen-react
<FileHandler filename="meterpoint.png" status="uploadComplete" onClose={() => alert('hello')} />
```

#### Upload complete state without a Close button

```specimen-react
<FileHandler filename="meterpoint.png" status="uploadComplete">
</FileHandler>
```

#### Upload error

With an optional error message

```specimen-react
<FileHandler filename="meterpoint.png" status="error" errorMessage="There was a problem uploading your photo. Please try again.">
</FileHandler>
```

Without an optional error message

```specimen-react
<FileHandler filename="meterpoint.png" status="error">
</FileHandler>
```
