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.

					

<form class="form-horizontal col-md-8">
   <div class="form-group">
      <label for="inputTypeFile">Upload file</label>
      <input type="file" id="inputTypeFile" class="input-btn-attach" aria-label="File Upload">
   </div>
</form>

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:

					
<!-- Default version -->

<div class="drop-area" id="drop-area-a">
   <input type="file" id="fileUpload1a" class="drop-area-input" aria-label="File Upload">
   <label for="fileUpload1a" multiple="multiple" class="drop-area-upload" tabindex="0">Upload file</label>
   <p>Drag and drop documents here to upload</p>
</div>

<!-- Compact/small version -->

<div class="drop-area drop-area-sm" id="drop-area-a">
   <input type="file" id="fileUpload1a_2" class="drop-area-input" aria-label="File Upload">
   <label for="fileUpload1a_2" multiple="multiple" class="drop-area-upload" tabindex="0">Upload file</label>
</div>

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:

					
<!-- Default version -->

<div class="drop-area highlight" id="drop-area-a">
   <input type="file" id="fileUpload1b" class="drop-area-input" aria-label="File Upload">
   <label for="fileUpload1b" multiple="multiple" class="drop-area-upload" tabindex="0">Upload file</label>
   <p>Drag and drop documents here to upload</p>
</div>

<!-- Compact/small version -->

<div class="drop-area drop-area-sm highlight" id="drop-area-a">
   <input type="file" id="fileUpload1d" class="drop-area-input" aria-label="File Upload">
   <label for="fileUpload1d" multiple="multiple" class="drop-area-upload" tabindex="0">Upload file</label>
</div>

To add an upload indicator/a spinner, just add <span class="spinner spinner-secondary-blue"></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:

					
<!-- Default version -->

<div class="drop-area" id="drop-area-a">
   <span class="spinner spinner-secondary-blue show"></span>
   <input type="file" id="fileUpload1c" class="drop-area-input" aria-label="File Upload">
   <label for="fileUpload1c" multiple="multiple" class="drop-area-upload" tabindex="0">Upload file</label>
   <p>Drag and drop documents here to upload</p>
</div>

<!-- Compact/small version -->

<div class="drop-area drop-area-sm" id="drop-area-a">
   <span class="spinner spinner-secondary-blue show"></span>
   <input type="file" id="fileUpload1d" class="drop-area-input" aria-label="File Upload">
   <label for="fileUpload1d" multiple="multiple" class="drop-area-upload" tabindex="0">Upload file</label>
</div>

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).

					

<div class="drop-area drop-area-sm" id="drop-area-a">
   <input type="file" id="fileUpload1e" class="drop-area-input" aria-label="File Upload">
   <label for="fileUpload1e" multiple="multiple" class="drop-area-upload" tabindex="0">Upload file</label>
</div>

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

Choose File

					

<div id="" class="drop-area">
    <p class="text-center">Drag and drop documents here to upload</p>
    <span class="spinner spinner-secondary-blue"></span>
    <input type="file" id="fileUpload" class="drop-area-input" aria-label="File Upload">
    <label for="fileUpload" class="drop-area-upload btn" tabindex="0"></label>
</div>

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:

					

<div id="" class="drop-area drop-area-sm">
    <span class="spinner spinner-secondary-blue"></span>
    <input type="file" id="fileUpload" class="drop-area-input" aria-label="File Upload">
    <label for="fileUpload" class="drop-area-upload" tabindex="0"></label>
    <p class="text-center">Drag and drop documents here to upload</p>
</div>
<div id="" class="drop-area-preview">
    <div class="preview-item-img">
        <a href="">
            <img src="" alt="">
        </a>
        <button type="button" class="btn-link btn-close-icon"></button>
    </div>
    ...
    <div class="preview-item-img">
        <a href="">
            <img src="" alt="">
        </a>
        <button type="button" class="btn-link btn-close-icon"></button>
    </div>
</div>

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

					

<div id="" class="drop-area">
    <span class="spinner spinner-secondary-blue"></span>
    <input type="file" id="fileUpload" class="drop-area-input" aria-label="File Upload">
    <label for="fileUpload" class="drop-area-upload" tabindex="0"></label>
    <p class="text-center">Drag and drop documents here to upload</p>
</div>
<div id="" class="drop-area-preview">
    <div class="preview-item-img">
        <a href="">
            <img src="" alt="">
        </a>
        <button type="button" class="btn-link btn-close-icon"></button>
    </div>
    ...
    <div class="preview-item-img">
        <a href="">
            <img src="" alt="">
        </a>
        <button type="button" class="btn-link btn-close-icon"></button>
    </div>
</div>

Preview the uploaded files as text with the file names: