Skip to content

multi-file-upload

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

multi-file-upload

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
test
test
 
 
README.md
README.md
 
 
agents.md
agents.md
 
 
package.json
package.json
 
 
postcss.config.js
postcss.config.js
 
 
tsconfig.json
tsconfig.json
 
 
vitest.config.ts
vitest.config.ts
 
 

README.md

@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-upload

Features

  • 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 light or dark class 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/entities";

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