File Upload Item
<p-file-upload-item> | PFileUploadItem
File items represent an uploaded file and provides information about file type, file size etc.
<p-file-upload-item > filename_lorem_ipsum.jpg <p-icon name="file-earmark" slot="image"></p-icon> </p-file-upload-item>
import { PFileUploadItem } from 'pure-uikit/dist/react'; const App = () => <PFileUploadItem></PFileUploadItem>;
Examples
Closable
Add the closable attribute to show a close button that will hide the element.
<p-file-upload-item closable> filename_lorem_ipsum.jpg <p-icon name="file-earmark" slot="image"></p-icon> </p-file-upload-item>
File size
Set the size attribute to display the file size of the item. The
Format Byte Component is used to convert the given bytes to a
human-readable format.
<p-file-upload-item size="120000"> filename_lorem_ipsum.jpg <p-icon name="file-earmark" slot="image"></p-icon> </p-file-upload-item>
Custom close button
The close button can be customized by using the close-button slot and by styling the
base part.
<p-file-upload-item closable> filename_lorem_ipsum.jpg <p-icon-button name="trash" slot="close-button" class="icon-button-color"></p-icon-button> <p-icon name="file-earmark" slot="image"></p-icon> </p-file-upload-item> <style> .icon-button-color::part(base) { color: var(--p-color-danger-500); } .icon-button-color::part(base):hover, .icon-button-color::part(base):focus { color: var(--p-color-danger-600); } .icon-button-color::part(base):active { color: var(--p-color-danger-400); } </style>
Loading
Show a loading bar by setting the loading attribute. Per default this will display a loading
bar in an indeterminate state. The height of the element will be determined by whether the
size attributes is set. This will ensure that the height of the item does not change when the
file has finished loading.
<p-file-upload-item loading closable size="120000"> filename_lorem_ipsum.jpg <p-icon name="file-earmark" slot="image"></p-icon> </p-file-upload-item>
Loading progress
Set the progress attribute to show the loading progress between 0 and
100.
<p-file-upload-item loading progress="40" closable size="120000" class="file-item"> filename_lorem_ipsum.jpg <p-icon name="file-earmark" slot="image"></p-icon> </p-file-upload-item> <br /> <p-button circle class="subtract-button"><p-icon name="dash" label="Decrease"></p-icon></p-button> <p-button circle class="add-button"><p-icon name="plus" label="Increase"></p-icon></p-button> <script> const fileItem = document.querySelector('.file-item'); const subtractButton = document.querySelector('.subtract-button'); const addButton = document.querySelector('.add-button'); addButton.addEventListener('click', () => { const value = Math.min(100, fileItem.progress + 10); fileItem.progress = value; if (fileItem.progress === 100) { fileItem.loading = false; } }); subtractButton.addEventListener('click', () => { const value = Math.max(0, fileItem.progress - 10); fileItem.progress = value; if (fileItem.progress < 100) { fileItem.loading = true; } }); </script>
Loading label
Use the label attribute to label the loading bar and tell assistive devices how to announce it.
<p-file-upload-item loading progress="20" label="Uploading File" closable> filename_lorem_ipsum.jpg <p-icon name="file-earmark" slot="image"></p-icon> </p-file-upload-item>
Warning
Set the warning attribute to change the color of the element.
<p-file-upload-item warning closable> File size exceeds 5MB limit <p-icon name="exclamation-triangle" slot="image"></p-icon> </p-file-upload-item>
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/file-upload-item/file-upload-item.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/file-upload-item/file-upload-item.js';
To import this component using a bundler:
import 'pure-uikit/dist/components/file-upload-item/file-upload-item.js';
To import this component as a React component:
import PFileUploadItem from 'pure-uikit/dist/react/file-upload-item';
Slots
| Name | Description |
|---|---|
| (default) | The file list item’s label. |
image
|
The file list item’s image. |
close-button
|
The file list item’s close button. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
loading
|
Draws the item in a loading state. |
|
boolean
|
false
|
progress
|
The current progress, 0 to 100. Only respects is loading prop is true. |
|
number
|
- |
label
|
A custom label for the progress bar’s aria label. Only respects if loading prop is true. |
string
|
- | |
lang
|
The locale to render the component in. |
string
|
- | |
warning
|
Draws the item in a warning state. |
|
boolean
|
false
|
closable
|
Makes the item closable. |
|
boolean
|
false
|
value
|
A unique value to store in the menu item. This can be used as a way to identify menu items when selected. |
string
|
""
|
|
size
|
The size of the file in bytes as a read-only 64-bit integer. |
|
number
|
- |
hidden
|
Indicates whether or not the file list item is hidden. |
|
boolean
|
false
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
p-show |
onPShow |
Emitted when the item opens. | - |
p-after-show |
onPAfterShow |
Emitted after the item opens and all animations are complete. | - |
p-hide |
onPHide |
Emitted when the item closes. | - |
p-after-hide |
onPAfterHide |
Emitted after the item closes and all animations are complete. | - |
Learn more about events.
Methods
| Name | Description | Arguments |
|---|---|---|
show() |
Shows the item. | - |
hide() |
Hides the item | - |
Learn more about methods.
Parts
| Name | Description |
|---|---|
base |
The component’s internal wrapper. |
image |
The file list item’s image. |
label |
The file list item’s label. |
close-button |
The file list item’s close button. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<p-icon><p-icon-button><p-progress-bar>