File selector organism

[JoeyDjr]

🎯 The purpose of this discussion is to allow users to select files through to the FileInput component and view the selected files through to the List and ListItem components.

💡 To do this, I propose to implements an organism that can provide a FileInput, a List and manage redux stores to meet this use case.

📝 This organism can provide the following props (from the FileInput) :

• label,
• description
• multiple
• acceptedFormats
• size

💬 We can talk together about the error properties : error and errorMessage.

🗳 I propose the following names for this organism, feel free to provide a better one :

• FilePicker
• FileSelector
• another one

🙏 Please do not hesitate to share your ideas @fredericvilcot @lolottetheclash @ErikssonJoakim @ccamel

[lolottetheclash]

From my side I think it's good to start on all the (optional) props you mentioned.
Regarding the error and its message, I would be for leaving on a version where the organism manages it directly.
Concerning the name, FilePicker is good, otherwise there is also maybe FileManager which gives an impression that goes better with the intelligent side of the organism I think.

[JoeyDjr]

I thought FileManager would make think about the functionality of deleting the selected file. But after some research, I find that FileManager refers to something too big, with too much functionality for what we want to do. And these searches lead me back to File Picker or File Selector.

[JoeyDjr]

💭 We can add a property to display the unit of the file size to display something like '15 MB' or '15000 KB' or '0.015 GB'. And maybe even an additional one for rounding.
❔ What do you thik about that ?

[JoeyDjr]

export type FilePickerProps = Pick<
  FileInputProps,
  'label' | 'description' | 'multiple' | 'acceptedFormats' | 'size'
> & {
  readonly sizeUnit?: SizeUnit
}

export type SizeUnit = 'B' | 'KB' | 'MB' | 'GB' | 'TB'

And the component can be accompanied by i18n files to translate the unit. For example MB in english, Mo in french.

[JoeyDjr]

After discussions with @fredericvilcot @lolottetheclash and @ErikssonJoakim, we decided to :

• Not provide the sizeUnit property but to create a function to display the readable size (with automatic unit) as a description element of a list item.
• Add the clearAll?: boolean property to the file picker to display clickable text when 2 or more files are selected, to remove all selected files.
• Implement a function that can check the mime type of the file.