File upload

Guidance

A file upload field is a type of input element that allows users to select files from their device and upload them. It is often used in forms to enable users to submit documents and images. You should only ask users to upload something if it’s critical to the delivery of your service.

Do

Use the accept attribute on your input to specify accepted file types in your HTML.
Tell users what file types accepted and the maximum file size.

Don’t

Use this component without implementing validation.

It's the responsibility of the consuming application validate and discard potentially malicious files.

Single file upload

This field will launch the Browse files dialog.

File upload

You can upload PNG, JPG, JPEG or PDF files.

"Choose file" and "no file chosen" labels are native browser elements. They inherit their language from the browser.

HTML

<!-- Basic file upload field -->
<label for="file">File</label>
<input type="file" id="file" accept="image/*, .pdf">

Multiple file upload

This component provides the option to drag and drop or browse and select multiple files to upload.

Click to upload or drag and drop PNG, JPG, JPEG or PDF files (max 15MB).

Please note, this documentation provides only the user interface styling for the component. You'll need to implement the drag-and-drop and upload functionality using your specific technology stack and server-side requirements.

HTML

<!-- Drag and drop file upload -->
<fieldset class="fieldset-container-dashed file-upload centered">
<legend class="sr-only">Drag and drop file upload</legend>
<i class="fa-solid fa-file-arrow-up"></i>
<p>
<a href="#">Click to upload</a> or drag and drop PNG, JPG, JPEG or PDF files (max 15MB).
</p>
</fieldset>

Explore the system

Get started

Guidance

Do

Don’t

Single file upload

HTML

Multiple file upload

HTML