design-system-react
design-system-react copied to clipboard
Add File Selector Component
Implement a File Selector Component based on https://www.lightningdesignsystem.com/components/file-selector/
I am working on it and will post the props proposal soon!
Here is my initial props proposal for the File Selector Component. Please let me know your thoughts.
Name | Type | Description |
---|---|---|
ClassName | String/Array/Object | Additional Class Names for Formatting |
Type | Enum {“base”, “image”, “integrated”} | Defines the type of File Selector (default: base) |
primaryLabel | String | Text for the primary label (Appears before the component) |
secondaryLabel | String | Text for the secondary label (Appears inside the component) |
ariaLabelledBy | String | Accessibility Option (To form accessible label from 2 separate text labels) |
zoneHeight | String | Height of the drop zone |
zoneWidth | String | Width of the drop zone |
onClick | Function | Action triggered on clicking the upload button |
hasDragOver | Function | Action triggered on dragging a file over to the drop zone |
fileUploaded | Boolean | Checks whether file is uploaded |
errorMessage | String | Text to describe the failure of file upload |
fileName | String | Name of the uploaded file |
Usage:
<FileSelector
primaryLabel="Add Attachment"
secondaryLabel="Click to upload"
/>
<FileSelector
primaryLabel="Upload Image"
secondaryLabel="Click to upload or drag image"
zoneHeight="25px"
zoneWidth="25px"
type=image
/>
Any update on this component?
I'm not aware of anybody actively working on this. If you pick it up, please change the "Assignee" on this issue to yourself. Thanks!
@garygong I proceeded with using this --> https://github.com/react-lds/react-lds/blob/master/src/components/FileSelector/FileSelector.js, I tweaked it a lil bit to fit what I need, but the gist of it is in that file. I would probably ask for permission to do a PR from the creator to contribute FileSelector component to here.