Drop area and file inputs

File inputs and drop areas are used to allow the user to upload and attach files, for instance a receipt to an expense claim.

Use when:

  • The user needs to upload one or several files.
  • Use the default file input for uploading files, unless you have special requirements. Be aware that this element looks different in different browsers and operating systems.
  • Use a drop area for uploading several files.

Behaviour

  • Indicate the maximum size of uploads if the files can be large, especially since many servers have default limits for uploaded file sizes.
  • Indicate allowable file types.
  • If possible, give feedback about upload progress if the files are large.
  • Drop areas: Files dropped on the dotted area are uploaded.
  • Drop areas: Indicate by background colour change that drop area is ready for drop when hovering above it with a bunch of files.

File inputs

In cases where the file upload is of less importance or part of a large form, use this file input to draw less attention to it. In cases where the file upload is one of the primary actions, look to adding a drop area instead to highlight its importance.

Drag and drop areas

The functionality for this component, i.e. the script, is not provided and needs to be written by you. The documentation has a demo functionality that you can draw inspiration from in your work.

Design

The simplest design for it is an wrapper with .drop-area class that contain an <input> type file, with the .drop-area-input class, followed by a <label> tag associated to the input with the .drop-area-upload class and a paragraph with the text that will imply that in here can upload.

Default version:

Drag and drop documents here to upload

Compact/small version:

To add the hover/highlight efect on the drop area just add .highlight class to the .drop-area wrapper tag.

Default version:

Drag and drop documents here to upload

Compact/small version:

To add an upload indicator/a spinner, just add <span class="spinner"></span> inside the .drop-area wrapper (more options for spinners here). By default the spinner should be hidden, you just need to add .show class when the files were dropped in the drop area and be visible while the user is waiting for the upload to be finished.

Default version:

Drag and drop documents here to upload

Compact/small version:

Options

Compact/small version

By adding .drop-area-sm class to the .drop-area wrapper will create the compact/smaller version.

Remember that the width for both versions depends by the section where is placed (parent).

Drop area with a visible button

Add the aditional .btn class to the <label> tag to add a visible button for upload files. At this point, the only area that can be clicked is the button.

This option is not available for the compact/smaller version.

Drag and drop documents here to upload

Drop area preview zone

You can display the thumbnail images or the file names of the uploaded files. Check the examples below:

Preview the uploaded files outside/below the drop area - compact/small version:

Preview the uploaded files outside/below the drop area - default version:

Drag and drop documents here to upload.

Accepted file formats: PNG, JPEG, SVG and PDF.

Maximum file size: 5MB.

Preview the uploaded files as text with the file names:

Drag and drop documents here to upload.

Accepted file formats: PNG, JPEG, SVG and PDF.

Maximum file size: 5MB.

Preview the uploaded files as text with the file names in a list:

Drag and drop documents here to upload.

Accepted file formats: PNG, JPEG, SVG and PDF.

Maximum file size: 5MB.

Preview the uploaded files inside the drop area, with image preview:
*this option is not for the compact/smaller version

Drag and drop documents here to upload.

Accepted file formats: PNG, JPEG, SVG and PDF.

Maximum file size: 5MB.

Preview the uploaded files inside the drop area, file names as text:
*this option is not for the compact/smaller version

Drag and drop documents here to upload.

Accepted file formats: PNG, JPEG, SVG and PDF.

Maximum file size: 5MB.

Preview the uploaded files inside the drop area, file names in a list:
*this option is not for the compact/smaller version

Drag and drop documents here to upload.

Accepted file formats: PNG, JPEG, SVG and PDF.

Maximum file size: 5MB.

Drop area with alternative preview zone

Add the aditional .drop-area-preview-alt class to the .drop-area-preview preview zone wrapper. You can use this alternative option in case you'll use the drop area on a white background.

Alternative preview zone inside the drop area, with image preview:

Drag and drop documents here to upload.

Accepted file formats: PNG, JPEG, SVG and PDF.

Maximum file size: 5MB.

Alternative preview zone inside the drop area, with file names as text:

Drag and drop documents here to upload.

Accepted file formats: PNG, JPEG, SVG and PDF.

Maximum file size: 5MB.

Alternative preview zone inside the drop area, with file names as list:

Drag and drop documents here to upload.

Accepted file formats: PNG, JPEG, SVG and PDF.

Maximum file size: 5MB.

Alternative preview zone outside the drop area, with image preview:

Drag and drop documents here to upload.

Accepted file formats: PNG, JPEG, SVG and PDF.

Maximum file size: 5MB.

Alternative preview zone outside the drop area, with file names as text:

Drag and drop documents here to upload.

Accepted file formats: PNG, JPEG, SVG and PDF.

Maximum file size: 5MB.

Alternative preview zone outside the drop area, with file names as list:

Drag and drop documents here to upload.

Accepted file formats: PNG, JPEG, SVG and PDF.

Maximum file size: 5MB.

Drawer/slider upload file preview

File name: no file selected