design-system-react icon indicating copy to clipboard operation
design-system-react copied to clipboard

Add File Selector Component

Open sharaththegeek opened this issue 5 years ago • 4 comments

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!

sharaththegeek avatar Apr 01 '19 14:04 sharaththegeek

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
/>

sharaththegeek avatar Apr 04 '19 16:04 sharaththegeek

Any update on this component?

Sheing avatar Jul 21 '20 19:07 Sheing

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 avatar Jul 21 '20 23:07 garygong

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

Sheing avatar Jul 26 '20 04:07 Sheing