@uipath/ui-widgets-multi-file-upload
v1.0.0
Published
A React component for uploading multiple files simultaneously to UiPath Orchestrator Storage Bucket
Downloads
165
Readme
@uipath/ui-widgets-multi-file-upload
A React multi-file-upload widget for uploading multiple files simultaneously to UiPath Orchestrator's Storage bucket.
Installation
npm install @uipath/ui-widgets-multi-file-uploadFeatures
- Upload multiple files simultaneously
- Drag and drop support
- File type validation via accept attribute
- File size validation
- Error handling
- Built on Apollo Wind FileUpload component
Usage
Note: Add either
lightordarkclass to your HTML<body>element to enable proper theming.
import { MultiFileUpload } from "@uipath/ui-widgets-multi-file-upload";
import "@uipath/ui-widgets-multi-file-upload/MultiFileUpload.css";
import { UiPath } from "@uipath/uipath-typescript";
function App() {
const sdk = new UiPath({
// SDK configuration
});
const handleUploadError = (error: Error) => {
console.error("Upload failed:", error);
};
const handleUploadSuccess = (uploadedFiles: File[]) => {
console.log(
"Successfully uploaded:",
uploadedFiles.map((f) => f.name),
);
};
return (
<MultiFileUpload
sdk={sdk}
bucketId={123}
folderId={456}
path="uploads/"
onUploadError={handleUploadError}
onUploadSuccess={handleUploadSuccess}
maxFileSizeInMb={10}
accept=".pdf,.jpg,.png"
/>
);
}Props
MultiFileUpload
| Prop | Type | Required | Description |
| ----------------- | --------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| sdk | UiPath | Yes | UiPath SDK instance |
| bucketId | number | Yes | The ID of the Orchestrator Storage Bucket to upload files to |
| folderId | number | Yes | The ID of the folder containing the Storage Bucket |
| path | string | No | Path prefix for uploaded files (e.g., "uploads/") |
| onUploadError | (error: Error) => void | No | Callback function called when upload fails |
| onUploadSuccess | (uploadedFiles: File[]) => void | No | Callback function called when files are successfully uploaded |
| maxFileSizeInMb | number | No | Maximum file size in megabytes |
| accept | string | No | Accepted file types (comma-separated MIME types or extensions). See MDN documentation for details |
Example with Options
<MultiFileUpload
sdk={sdk}
bucketId={123}
folderId={456}
path="documents/"
onUploadError={(error) => console.error("Upload failed:", error)}
onUploadSuccess={(files) => console.log("Uploaded:", files.length, "files")}
maxFileSizeInMb={5}
accept=".pdf,.docx,.xlsx"
/>Requirements
- React 19.2.0+
- React DOM 19.2.0+
- @uipath/uipath-typescript
- @uipath/apollo-wind
License
MIT