Upload File Box
Upload File Box allows users to select and upload a file to a specific location.
Class | Type | |
---|---|---|
upload-file-box
|
Upload File Box | A class representing an upload file box |
Components
Upload File Boxes consist of eight components:
Class | Type |
---|---|
upload-file-box
|
Partial container |
upload-file-box-image
|
Image |
upload-file-box-title
|
Title |
upload-file-box-info
|
Info |
upload-file-box-list
|
List |
upload-file-box-name
|
File Name |
upload-file-box-size
|
File Size |
is-hover-with-file
|
Hover State |
Default
Drag and drop files here to upload Upload a File
Max file size: 10MB
<div
class="box is-border-dashed is-no-shadow u-padding-24"
style="--box-border-radius:var(--border-radius-xsmall);"
>
<div class="upload-file-box">
<div class="upload-file-box-image"><span class="icon-upload" aria-hidden="true"></span></div>
<div class="u-min-width-0 u-text-center">
<h5 class="upload-file-box-title heading-level-7 u-inline">
<span class="is-only-desktop">Drag and drop files here to upload</span>
<span class="is-not-desktop">Upload a File</span>
</h5>
<button class="tooltip u-inline u-margin-inline-start-4" aria-label="variables info">
<span class="icon-info" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip">Only PNGs accepted.</span>
</button>
</div>
<div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
<p class="upload-file-box-info body-text-2 u-normal">Max file size: 10MB</p>
<button class="button is-secondary is-full-width-mobile">
<span class="text">Choose a file</span>
</button>
</div>
</div>
</div>
File Added
Drag and drop files here to upload Upload a File
Max file size: 10MB
- pink-floyd-cover .png 4MB
<div
class="box is-border-dashed is-no-shadow u-padding-24"
style="--box-border-radius:var(--border-radius-xsmall);"
>
<div class="upload-file-box">
<div class="upload-file-box-image"><span class="icon-upload" aria-hidden="true"></span></div>
<div class="u-min-width-0 u-text-center">
<h5 class="upload-file-box-title heading-level-7 u-inline">
<span class="is-only-desktop">Drag and drop files here to upload</span>
<span class="is-not-desktop">Upload a File</span>
</h5>
<button class="tooltip u-inline u-margin-inline-start-4" aria-label="variables info">
<span class="icon-info" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip">Only PNGs accepted.</span>
</button>
</div>
<div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
<p class="upload-file-box-info body-text-2 u-normal">Max file size: 10MB</p>
<button class="button is-secondary is-full-width-mobile">
<span class="text">Choose a file</span>
</button>
</div>
<ul class="upload-file-box-list u-min-width-0">
<li class="u-flex u-cross-center u-min-width-0">
<span class="icon-document" aria-hidden="true"></span>
<span class="upload-file-box-name u-trim u-min-width-0">pink-floyd-cover</span>
<span class="upload-file-box-name u-min-width-0 u-flex-shrink-0">.png</span>
<span class="upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16">4MB</span>
<button
type="button"
class="button is-text is-only-icon u-margin-inline-start-auto"
aria-label="remove file"
style="--button-size:1.5rem;"
>
<span class="icon-x" aria-hidden="true"></span>
</button>
</li>
</ul>
</div>
</div>
Error
Drag and drop files here to upload Upload a File
Max file size: 10MB
- pink-floyd-cover .png 4MB
Display a contextual error message here
<div
class="box is-border-dashed is-no-shadow u-padding-24"
style="--box-border-radius:var(--border-radius-xsmall);"
>
<div class="upload-file-box">
<div class="upload-file-box-image"><span class="icon-upload" aria-hidden="true"></span></div>
<div class="u-min-width-0 u-text-center">
<h5 class="upload-file-box-title heading-level-7 u-inline">
<span class="is-only-desktop">Drag and drop files here to upload</span>
<span class="is-not-desktop">Upload a File</span>
</h5>
<button class="tooltip u-inline u-margin-inline-start-4" aria-label="variables info">
<span class="icon-info" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip">Only PNGs accepted.</span>
</button>
</div>
<div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
<p class="upload-file-box-info body-text-2 u-normal">Max file size: 10MB</p>
<button class="button is-secondary is-full-width-mobile">
<span class="text">Choose a file</span>
</button>
</div>
<ul class="upload-file-box-list u-min-width-0">
<li class="u-flex u-cross-center u-min-width-0">
<span class="icon-document" aria-hidden="true"></span>
<span class="upload-file-box-name u-trim u-min-width-0">pink-floyd-cover</span>
<span class="upload-file-box-name u-min-width-0 u-flex-shrink-0">.png</span>
<span class="upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16">4MB</span>
<button
type="button"
class="button is-text is-only-icon u-margin-inline-start-auto"
aria-label="remove file"
style="--button-size:1.5rem;"
>
<span class="icon-x" aria-hidden="true"></span>
</button>
</li>
</ul>
</div>
</div>
<p class="helper u-color-text-danger u-margin-block-start-8">
<span class="icon-exclamation-circle" aria-hidden="true"></span>
<span class="text">Display a contextual error message here</span>
</p>