FileUpload

Dropdown Section

The Dropdown section component provides a versatile set of file and image upload functionalities. It includes three main components: FileUpload, ImageUpload, and FileUploadCard. Each of these components is designed to handle specific aspects of file and image management within a user interface, offering features like drag-and-drop uploads, progress tracking, and error

Components

1.FileUpload:Props

• className (string): Custom class names for additional styling
• onChange (function): Callback function that is triggered when files are selected or uploaded. It receives an array of selected files as an argument.

<FileUpload className="mt-4" onChange={(data) => { console.log(data) }} />

2.ImageUpload:Props

• size (string): The size of the upload area. Options are 'xs', 'lg'.
• type (string): The type of image being uploaded, either 'avatar' or 'company'.
• className (string): Custom class names for additional styling.
• onChange (function): Callback function that is triggered when an image is selected or uploaded. It receives an object containing the image file and data URI as an argument.
• onDelete (function): Callback function that is triggered when the image is removed.

<ImageUpload className="mt-4" size="lg" type="avatar" onChange={(data) => { console.log(data) }} />

3.FileUploadCard:Props

• label (string): The name of the file.
• progress (number): The upload progress as a percentage.
• state (string): The current state of the upload. Options are 'uploading', 'completed', 'error'.
• infoText (string): Additional information about the file (e.g., file size).
• className (string): Custom class names for additional styling.
• onDelete (function): Callback function that is triggered when the delete action is taken.
• onClose (function): Callback function that is triggered when the close action is taken.
• onRetry (function): Callback function that is triggered when the retry action is taken.

<FileUploadCard className="mt-4" label="messages.pdf" progress={68} state="uploading" infoText="0 KB of 120 KB" onDelete={() => { console.log("deleted") }} onClose={() => { console.log("closed") }} onRetry={() => { console.log("retried") }} />

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	5

Detailed usage locations:

frontend-app-staff-dashboard

• src/pages/ai-studio/AiStudio.jsx
• src/pages/create-program/index.jsx
• src/pages/library/UploadDrawer.jsx
• src/pages/organizations/CreateOrganisation.jsx
• src/pages/program-single/settings/index.jsx