Basic Uploader

File upload input and drag-and-drop area

This component is in preview. The consuming app is responsible for implementing file validation and loading UI.

Demo

API

Tag

Name	Description
`<s-uploader>`	Custom Element, accepts content

Slots

Name	Required	Description
`guidelines`		Element that contains guidelines for file upload (including maximum file size, accepted file types, maximum number of data rows, etc.)

Attributes

Name	Value	Description
`accept`	string	Comma-separated list of accepted file types.
`multiple`	Boolean attribute	Allows users to upload multiple files.
`i18n`	string	A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name	Value	Description
`accept`	string	Comma-separated list of accepted file types.
`multiple`	Boolean attribute	Allows users to upload multiple files.
`i18n`	object	A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Events

Name	Detail	Description
`s-attach`	The `files` that have been attached to the form are available on `e.detail`.	Fired when files are attached to the `s-uploader`.

Demo

API

Tag

Name
`<SUploader>`

Slots

See slots above.

Props

Name	Value	Description
`multiple`	Boolean attribute	Allows users to upload multiple files.
`i18n`	object	A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
`onS-attach`	Function	Handles the `s-attach` event fired when files are attached to the Uploader. The `files` that have been attached to the form are available on `e.detail`.

Skylab React links

General information about using our React package

i18n Strings

ID	Description	Default value
`"uploader.uploaderLabel"`	The file uploader input's label.	search
`"uploader.chooseFileSingle"`	The CTA button text in the uploader's resting state.	Choose a file
`"uploader.chooseFilesMultiple"`	The CTA button text (when uploader has the `multiple` attribute).	Choose files
`"uploader.dragDropFileSingle"`	Header in the uploader's guidelines.	Drag and drop a file here
`"uploader.dragDropFilesMultiple"`	Header in the uploader's guidelines (with `multiple` attribute).	Drag and drop files here
`"uploader.dropFileSingle"`	Dragover state text.	Drop the file here
`"uploader.dropFilesMultiple"`	Dragover state text (with `multiple` attribute).	Drop the files here

Guidelines

File Validation

The current version of the Uploader does not send files to Avalara's file validation service. This functionality must be implemented by the consuming app. The aui-uploader is fully integrated with the FVS.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com