Upload
The Upload component enables the publishing of files (such as text, images, and videos) to a remote server using a web interface or an upload tool.
Import
import { VKUpload } from "@vivakits/react-components";Basic
When the upload button is clicked, a file selection dialog appears, allowing the user to choose files for upload. files and handleFileChange props are required.
Accepted Files
Specify the types of files allowed for upload using the accepts property to ensure only valid file types are selected.
Upload png file only
Upload pdf file only
Multiple Files
Upload multiple files simultaneously using the multiple property and limit the number of files selected with the maxFiles property.
Upload multiple files
Limit the number of selected files
Drag and Drop
Control the drag-and-drop functionality with the allowDragAndDrop property in the Upload component.
Disable drag and drop
Example
Here are examples demonstrating how to use the Upload component for selecting files and uploading them directly to the cloud.
Upload on file change
Upload component to select multiple files and upload them to the cloud with a single click.
Upload on button click
Clear all selected files in a single action.
Clear all files
Upload API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| accepts | string | Specifies the types of files that can be uploaded, ensure file types are specified with a leading dot (e.g., ".png" instead of "png") | - |
| children | ReactNode | Additional elements or components to be rendered inside the upload box | - |
| clearable | boolean | Allows users to remove all files at once. Works only when multiple is true | false |
| customClearBtnComponent | JSX.Element | Custom clear button component | - |
| customUploadBtnComponent | JSX.Element | Custom upload button component | - |
| files | array[] | Array of files to be uploaded | - |
| handleFileChange | function() | Callback function for handling file changes | - |
| handleUpload | function() | Callback function to handle the upload process | - |
| headerComponent | JSX.Element | Custom header component for the upload box | - |
| uploadComponent | JSX.Element | Custom upload component | - |
| multiple | boolean | Enables the selection of multiple files at once | false |
| uploadBoxTextComponent | JSX.Element | Custom text component for the upload box | - |
| uploadBoxWrapperClassName | CSS | CSS class(es) to style the wrapper of the upload box | - |
| uploadIconComponent | JSX.Element | Custom upload icon component | - |
| uploadIconWrapperClassName | CSS | CSS class(es) to style the wrapper of the upload icon | - |
| maxFiles | number | Limits the number of files that can be uploaded. Works only when multiple is true. | - |
| className | CSS | CSS class(es) to style the whole upload component. | - |
| allowDragAndDrop | boolean | Controls file drag and drop functionality. | true |
FileUploadList API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| files | array[] | Array of files to be uploaded | - |
| customFileItemComponent | JSX.Element | Custom component for rendering individual file items in the list | - |
| removeIconComponent | JSX.Element | Custom remove icon component for each file item | - |
| handleRemove | function() | Callback function to handle file removal from the list | - |
| fileItemWrapperClassName | CSS | CSS class(es) to style the wrapper of each file item | - |
| previewWrapperClassName | CSS | CSS class(es) to style the preview wrapper of the uploaded files | - |