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.

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

Uploading File Handle with a very long file name

Upload complete state with a Close button

Upload complete state without a Close button

Upload error

With an optional error message

Without an optional error message