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
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.
Drag and drop documents here to upload
To add the hover/highlight efect on the drop area just add .highlight class to the .drop-area wrapper tag.
Drag and drop documents here to upload
smaller version:
To add an upload indicator, just add a <span> tag with the .spinner and the variant spiner class (e.g.: .spinner-secondary-blue) inside the .drop-area wrapper.
As a normal state is hidden, but adding the .show class at the oportune moment will be visible.
Drag and drop documents here to upload
smaller version:
Options
Compact option
By adding .drop-area-sm class to the .drop-area wrapper will create the compact/smaller version.
Remember that the width for the both version is dictated by the section where is placed.
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.
Drag and drop documents here to upload
Drop area preview zone
You can add a zone for displaying the thumbnail image or the file name for the uploaded files.
Outside the drop area
As text for the file name, as unique pils.
Drag and drop documents here to upload.
Accepted file formats: PNG, JPEG, SVG and PDF.
Maximum file size: 5MB.
Or as a list.
Drag and drop documents here to upload.
Accepted file formats: PNG, JPEG, SVG and PDF.
Maximum file size: 5MB.
Preview zone inside the drop area
Drag and drop documents here to upload.
Accepted file formats: PNG, JPEG, SVG and PDF.
Maximum file size: 5MB.
Drag and drop documents here to upload.
Accepted file formats: PNG, JPEG, SVG and PDF.
Maximum file size: 5MB.
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.
Alternative preview zone inside the drop area
Alternative preview zone outside the drop area
<!-- File input / upload input -->
<label for="inputTypeFile">Upload file</label>
<input type="file" id="inputTypeFile" class="input-btn-attach" aria-label="File Upload">
<!-- Area drop larger variant -->
<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>
<!-- Area drop small/compact variant -->
<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>
</div>
<!-- Area drop with button -->
<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>
<!-- Area drop larger variant with outside preview zone with thumbnails -->
<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 scr="" alt="">
</a>
<buton type="buton" class="btn-link btn-close-icon"></buton>
</div>
...
<div class="preview-item-img">
<a href="">
<img scr="" alt="">
</a>
<buton type="buton" class="btn-link btn-close-icon"></buton>
</div>
</div>
<!-- Area drop larger variant with inside preview zone with text pills -->
<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 id="" class="drop-area-preview">
<div class="preview-item">
<a href="">Invoice.pdf</a>
<buton type="buton" class="btn-link">
<span class="vismaicon vismaicon-sm vismaicon-dynamic vismaicon-delete"></span>
</buton>
</div>
...
<div class="preview-item">
<a href="">Invoice-B.pdf</a>
<buton type="buton" class="btn-link">
<span class="vismaicon vismaicon-sm vismaicon-dynamic vismaicon-delete"></span>
</buton>
</div>
</div>
</div>
<!-- Area drop larger variant with inside preview zone with list and alternative previewzone -->
<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 id="" class="drop-area-preview drop-area-preview-alt drop-area-preview-list">
<div class="preview-item">
<a href="">Invoice.pdf</a>
<buton type="buton" class="btn-link">
<span class="vismaicon vismaicon-sm vismaicon-dynamic vismaicon-delete"></span>
</buton>
</div>
...
</div>
</div>