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 uploadUpload a File
Max file size: 10MB
class="box is-border-dashed is-no-shadow u-padding-24"
style="--box-border-radius:var(--border-radius-xsmall);"
>
Drag and drop files here to upload
Upload a File
Only PNGs accepted.
Max file size: 10MB
Choose a file
File Added
Drag and drop files here to uploadUpload a File
Max file size: 10MB
- pink-floyd-cover.png4MB
class="box is-border-dashed is-no-shadow u-padding-24"
style="--box-border-radius:var(--border-radius-xsmall);"
>
Drag and drop files here to upload
Upload a File
Only PNGs accepted.
Max file size: 10MB
Choose a file
pink-floyd-cover
.png
4MB
type="button"
class="button is-text is-only-icon u-margin-inline-start-auto"
aria-label="remove file"
style="--button-size:1.5rem;"
>
Error
Drag and drop files here to uploadUpload a File
Max file size: 10MB
- pink-floyd-cover.png4MB
Display a contextual error message here
class="box is-border-dashed is-no-shadow u-padding-24"
style="--box-border-radius:var(--border-radius-xsmall);"
>
Drag and drop files here to upload
Upload a File
Only PNGs accepted.
Max file size: 10MB
Choose a file
pink-floyd-cover
.png
4MB
type="button"
class="button is-text is-only-icon u-margin-inline-start-auto"
aria-label="remove file"
style="--button-size:1.5rem;"
>
Display a contextual error message here