File Input

Native file inputs currently work with <sl-form>, but it would be nice to have a more intuitive file input component. Perhaps something that shows each file as a clearable tag after the user makes a selection. Not sure on the UI, but features should include:

• accept prop
• multiple prop
• Drag and drop files
• Pasting files
• A standard file input control
• A button variation
• Dropzone with file list

Please vote for this feature using 👍 or 👎

[claviska]

At first glance, this looks really good and well thought out. Unfortunately, it was submitted the first day of my vacation so I won’t be able to give it a proper review until I get back next week. However, separate PRs would be better so we can keep each one focused and get them merged faster.

Thanks for contributing this, and apologies for the delay. I can’t wait to get home and review it!

[mkitzmann]

Our team (@kaiszybiak, @preethivenkatesh-sdase, @janborkensteinm, @mkitzmann) prepared a proposal for file input components. We are looking forward to your feedback and would like to discuss the next steps.

We suggest to build 4 separate components:

• Dropzone
• FileList
• FileListItem
• FileInput

These components could be used individually or composed together (see animation below). We have created drafts for the properties, events, slots, CSS Custom Properties and CSS Parts. In the next step, we would suggest to open individual issues for each component, so the requirements for each one can be discussed separately.

https://user-images.githubusercontent.com/35574021/167856631-8b7b2c5a-dd47-4626-875c-58790e79f129.mov

Dropzone

Dropzones are areas into which files can be dragged and dropped to upload a file.

It might be worth looking into if we could utilize an existing library here like https://github.com/dropzone/dropzone. There has also been some similar work done in Adobe Spectrum Web Components.

Properties

Name	Description	Reflects	Type	Default
accept	A string that defines the file types the file input should accept. Defaults to ‘*’		string	'*'
disabled	Disables the dropzone.		boolean	false
multiple	Indicates whether the form control accepts one or more values		boolean	false
noButton	If true, hides button to open the native file selection dialog		boolean	false
noDrag	If true, disables drag ‘n’ drop		boolean	false
maxFileSize	An optional maximum size of a file that will be considered valid.		number | undefined	-
maxFiles	An optional maximum amount of files that will be considered valid.		number | undefined	-
label	An optional overwrite for the upload label		string | undefined	-
buttonLabel	An optional overwrite for the preview button label		string | undefined	-
lang	The locale to render the component in.		string	-

Events

Name	React Event	Description	Event Detail
sl-drag-leave	onSlDragLeave	Emitted when dragged files have been moved out of the dropzone area without having been dropped.	-
sl-drag-over	onSlDragOver	Emitted when files have been dragged over the dropzone area, but not yet dropped.	-
sl-drop	onSlDrop	Emitted when dragged files have been dropped on the dropzone area.	-
sl-change	onSlChange	Emitted when files have been uploaded via the dropzone or file dialog.	-
sl-drop-accepted	onSlDropAccepted	Emitted when dragged files have been dropped on the dropzone area and were accepted.	-
sl-drop-rejected	onSlDropRejected	Emitted when dragged files have been dropped on the dropzone area but were rejected.	-
sl-file-dialog-open	onSlFileDialogOpen	Emitted when native file dialog is prompted.	-
sl-file-dialog-cancel	onSlFileDialogCancel	Emitted when native file dialog is closed without selection.	-

Slots

Name	Description
content	The dropzone’s content. Alternatively, you can use the icon slot and label prop.
icon	The dropzone’s icon.

CSS Custom Properties

Name	Description	Default
--border-radius	The border radius for dropzone edges.
--border-width	The width of dropzone borders.

CSS Parts

Name	Description
base	The component’s internal wrapper.
content	The preview slot’s container.

Dependencies

This component imports the following dependencies.

• <sl-button>
• <sl-icon>
• <sl-spinner>

FileList

A file list provides a list of files and is composed of FileListItem components.

Events

Name	React Event	Description	Event Detail
sl-remove	onSlRemove	Emitted when a menu item is removed.	{ item: SlFileListItem }

Slots

Name	Description
(default)	The menu’s content, including menu items, menu labels, and dividers.

CSS Parts

Name	Description
base	The component’s internal wrapper.

FileListItem

File list items represent an uploaded file and provides information about file type, file size etc.

Properties

Name	Description	Reflects	Type	Default
loading	Draws the item in a loading state.		boolean	false
progressValue	The current progress, 0 to 100. Only respects is loading prop is true.		number	0
indeterminate	When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. Only respects is loading prop is true.		boolean	false
progressLabel	A custom label for the progress bar’s aria label. Only respects is loading prop is true.		string	''
lang	The locale to render the component in.		string	-
warning	Draws the item in a warning state.		boolean	false
value	A unique value to store in the menu item. This can be used as a way to identify menu items when selected.		string	''
size	The size of the file in bytes as a read-only 64-bit integer.		string	''
type	The MIME type of the file as a read-only string or an empty string if the type couldn’t be determined.		string	''

Slots

Name	Description
(default)	The menu item’s label.
icon	The menu item’s icon.
warning-icon	The menu item’s warning icon.
remove-icon	The menu item’s remove icon.

CSS Parts

Name	Description
base	The component’s internal wrapper.
label	The menu item label.

Dependencies

This component imports the following dependencies.

• <sl-button>
• <sl-icon>
• <sl-progress-bar>
• <sl-spinner>

FileInput

File inputs can be used to upload one or more files from the local file system.

This could be a separate component or extend the default input component. Its properties should align with the native file input, so it can be used in forms (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)

Properties

Name	Description	Reflects	Type	Default
accept	A string that defines the file types the file input should accept. Defaults to ‘*’. Only works if input type is ‘file’		string	'*'
multiple	Indicates whether the form control accepts one or more values. Only works if input type is ‘file’		boolean	false
maxFileSize	An optional maximum size of a file that will be considered valid.		number | undefined	-
maxFiles	An optional maximum amount of files that will be considered valid.		number | undefined	-
size	The input’s size.		'small' | 'medium' | 'large'	'medium'
name	The input’s name attribute.		string	-
filled	Draws a filled input.		boolean	false
warning	Draws the input in a warning state.		boolean	false
pill	Draws a pill-style input with rounded edges.		boolean	false
label	The input’s label. Alternatively, you can use the label slot.		string	''
warningLabel	The input’s warning label. Alternatively, you can use the warning-label slot.		string	''
buttonLabel	The input’s button label. Alternatively, you can use the button-label slot.		string	''
helpText help-text	The input’s help text. Alternatively, you can use the help-text slot.		string	''
placeholder	The input’s placeholder text.		string	-
lang	The locale to render the component in.		string	-
disabled	Disables the input.		boolean	false
required	Makes the input a required field.		boolean	false
invalid	This will be true when the control is in an invalid state. Validity is determined by props such as, required, maxFileSize, maxFiles, and accept using the browser’s constraint validation API.		boolean	false

Events

Name	React Event	Description	Event Detail
sl-change	onSlChange	Emitted when an alteration to the control’s value is committed by the user.	-
sl-clear	onSlClear	Emitted when the clear button is activated.	-
sl-input	onSlInput	Emitted when the control receives input and its value changes.	-
sl-focus	onSlFocus	Emitted when the control gains focus.	-
sl-blur	onSlBlur	Emitted when the control loses focus.	-
sl-remove	onSlRemove	Emitted when file tag is removed.	-
sl-file-dialog-open	onSlFileDialogOpen	Emitted when native file dialog is prompted.	-
sl-file-dialog-cancel	onSlFileDialogCancel	Emitted when native file dialog is closed without selection.	-

Slots

Name	Description
label	The file input’s label. Alternatively, you can use the label prop.
button	The file input’s button. Alternatively, you can use the buttonLabel prop.
warning-label	The file input’s warning label. Alternatively, you can use the warningLabel prop.
preview-tag	The tag representing an uploaded file.
prefix	Used to prepend an icon or similar element to the input.
suffix	Used to append an icon or similar element to the input.
help-text	Help text that describes how to use the input. Alternatively, you can use the help-text prop.

CSS Parts

Name	Description
form-control	The form control that wraps the label, input, and help-text.
form-control-label	The label’s wrapper.
form-control-input	The input’s wrapper.
form-control-help-text	The help text’s wrapper.
base	The component’s internal wrapper.
preview-tag	The component’s preview tag wrapper.
button	The file dialog button.
input	The input control.
prefix	The input prefix container.
suffix	The input suffix container.

Dependencies

This component imports the following dependencies.

• <sl-button>
• <sl-icon>
• <sl-spinner>