File Upload
Purpose
File upload provides a simple way to add multiple files and is commonly used when additional, specific, information is need.
Please note that this pattern for File Upload is providing guidance and not functionality.
Thanks to the GCS UX Design Team for the contribution!
Drag & Drop Well
Usage
A well affords a large area to drop in files and a text link to launch a file browser.
Drag & Drop Well Specs
Well Background = White (default), Bright Blue (drag), 5% opacity
Well Border = Gray 04 (default), Bright Blue (file drag)
Icon = Upload (Large), Bright Blue
Text Style = Body 1, Gray 05 (body), Bright Blue (text link)
Well States
Default
File Drag
Example
On mobile the well changes to a Medium Icon Secondary Button.
<div class="file-upload" id="fileupload">
<div class="hidden-sm-down pad-3-t">
<div class="icon icon-hover dls-icon-upload icon-lg dls-bright-blue pad-2-t" />
<div>Drag and drop here or <a href="javascript:void()" class="link-underlined">select files</a>.</div>
</div>
<button class="hidden-md-up btn btn-secondary btn-icon icon-hover dls-icon-upload margin-1-r">
<span>Select Files</span>
</button>
</div>
<script>
(function() {
var fileupload;
if (document.readyState == "complete"
|| document.readyState == "loaded")
reset();
else
document.addEventListener('DOMContentLoaded', reset);
function onFocus() {
fileupload.classList.add('focus');
}
function onBlur() {
fileupload.classList.remove('focus');
}
function reset() {
fileupload = document.getElementById('fileupload');
fileupload.addEventListener('dragenter', onFocus);
fileupload.addEventListener('dragover', onFocus);
fileupload.addEventListener('dragleave', onBlur);
fileupload.addEventListener('drop', onBlur);
}
})();
</script>File Upload States
Usage
Show the upload progress with clear notifications when an error occurs.
To make these states as adaptable as possible, placement guidance in relation to the drop zone is up to the designer and product team.
Upload States Specs
Icons = Check (small), Status - Success (success)
Label = Label 3
Document Text = Body 1, Gray 06 (active upload and failed), Bright Blue (complete)
Size and Percentage = Label 1
Horizontal Rule = 1px, Gray 02
Actionable Text = Text Links
Linear Loader = Progress Indicators
Example - Uploading
<!--For small and up screen sizes-->
<div class="hidden-xs-down">
<p class="heading-3">Uploading</p>
<div class="pad-1-tb">
<hr class="pad-1-b" />
<div class='flex flex-row-reverse flex-justify-between flex-align-items-center'>
<div class="float-right pad-3-l flex-item-shrink">
<span class="label-1">70%</span> <span class="dls-gray-03 pad-2-l pad-1-r">|</span>
<button class="btn-utility-wrapper">
<span class="btn btn-utility btn-tertiary">Cancel</span>
</button>
</div>
<div>My Business Financial Statement 2022.pdf</div>
</div>
<div role="progressbar" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="70" class="progress-bar">
<div class="progress-track count-width"></div>
</div>
</div>
<div class="pad-1-tb">
<hr class="pad-1-b" />
<div class="float-right pad-3-l">
<span class="pad-1-r">Complete</span>
<span class="icon icon-sm dls-icon-check-filled dls-color-success" />
</div>
Photo ID.png
</div>
<div role="progressbar" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="100" class="progress-bar">
<div class="progress-track count-width"></div>
</div>
</div>
<!--For extra small screen sizes-->
<div class="hidden-sm-up">
<p class="heading-3">Uploading</p>
<div class="pad-1-t">
<hr class="pad-1-b" />
<div class='flex flex-column-reverse'>
<div class="float-right pad-3-l flex-item-shrink flex-align-self-end">
<span class="label-1">70%</span> <span class="dls-gray-03 pad-2-l pad-1-r">|</span>
<button class="btn-utility-wrapper">
<span class="btn btn-utility btn-tertiary">Cancel</span>
</button>
</div>
<div>My Business Financial Statement 2022.pdf</div>
</div>
<div role="progressbar" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="70" class="progress-bar">
<div class="progress-track count-width"></div>
</div>
</div>
<div class="pad-1-tb">
<hr class="pad-1-b" />
<div class="float-right pad-3-l">
<span class="icon icon-sm dls-icon-check-filled dls-color-success" />
</div>
Photo ID.png
</div>
<div role="progressbar" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="100" class="progress-bar">
<div class="progress-track count-width"></div>
</div>
</div>Example - Completed
<!--For small and up screen sizes-->
<div class="hidden-xs-down">
<p class="heading-3">Completed</p>
<div class="pad-1-t">
<hr/>
<div class='flex flex-row-reverse flex-justify-between flex-align-items-center pad-1-tb'>
<div class="float-right pad-3-l flex-item-shrink">
<span class="label-1">923 KB</span> <span class="dls-gray-03 pad-2-l pad-1-r">|</span>
<button class="btn-utility-wrapper">
<span class="btn btn-utility btn-tertiary">Remove</span>
</button>
</div>
<a class="link-underlined">My Business Financial Statement 2022.pdf</a>
</div>
</div>
<div class="pad-1-b">
<hr/>
<div class='flex flex-row-reverse flex-justify-between flex-align-items-center pad-1-tb'>
<div class="float-right pad-3-l flex-item-shrink">
<span class="label-1">3.4 MB</span> <span class="dls-gray-03 pad-2-l pad-1-r">|</span>
<button class="btn-utility-wrapper">
<span class="btn btn-utility btn-tertiary">Remove</span>
</button>
</div>
<a class="link-underlined">Photo ID.png</a>
</div>
</div>
</div>
<!--For extra small screen sizes-->
<div class="hidden-sm-up">
<p class="heading-3">Completed</p>
<div class="pad-1-t">
<hr/>
<div class="flex flex-column-reverse pad-1-tb">
<div class="float-right pad-3-l flex-item-shrink flex-align-self-end">
<span class="label-1">923 KB</span> <span class="dls-gray-03 pad-2-l pad-1-r">|</span>
<button class="btn-utility-wrapper">
<span class="btn btn-utility btn-tertiary">Remove</span>
</button>
</div>
<a class="link-underlined">My Business Financial Statement 2022.pdf</a>
</div>
</div>
<div class="pad-1-b">
<hr/>
<div class='flex flex-column-reverse pad-1-tb'>
<div class="float-right pad-3-l flex-item-shrink flex-align-self-end">
<span class="label-1">3.4 MB</span> <span class="dls-gray-03 pad-2-l pad-1-r">|</span>
<button class="btn-utility-wrapper">
<span class="btn btn-utility btn-tertiary">Remove</span>
</button>
</div>
<a class="link-underlined">Photo ID.png</a>
</div>
</div>
</div>Example - Failed
<!--For small and up screen sizes-->
<div class="hidden-xs-down">
<p class="heading-3">Failed</p>
<div class="pad-1-t">
<hr/>
<div class='flex flex-row-reverse flex-justify-between flex-align-items-center pad-1-t'>
<div class="float-right pad-3-l flex-align-self-end">
<button class="btn-utility-wrapper">
<span class="btn btn-utility btn-tertiary">Remove</span>
</button>
</div>
My Business Financial Statement 2022.pdf
</div>
</div>
<div class="alert-form" role="alert">
<span class="icon icon-sm dls-icon-warning-filled valign-top margin-1-r"></span>
<span>File size must be less than 10MB.</span>
</div>
</div>
<!--For extra small screen sizes-->
<div class="hidden-sm-up">
<p class="heading-3">Failed</p>
<div class="pad-1-t">
<hr/>
<div class='flex flex-column-reverse pad-1-t'>
<div class="float-right pad-3-l flex-align-self-end">
<button class="btn-utility-wrapper">
<span class="btn btn-utility btn-tertiary">Remove</span>
</button>
</div>
My Business Financial Statement 2022.pdf
</div>
</div>
<div class="alert-form" role="alert">
<span class="icon icon-sm dls-icon-warning-filled valign-top margin-1-r"></span>
<span>File size must be less than 10MB.</span>
</div>
</div>