Skip to main content

Starwind UI v1.7.0 is now available!

Dropzone

Installation

Usage

Info

No dropped files on this page are uploaded anywhere.

Default

The default Dropzone component displays a cloud upload icon with a prompt to upload files, and shows what files have been selected.

Custom Content

The dropzone components can be customized through slots. The default <Dropzone /> component has the following three components in the slot if nothing is passed:

<DropzoneUploadIndicator />
<DropzoneLoadingIndicator />
<DropzoneFilesList />

The DropzoneUploadIndicator and DropzoneLoadingIndicator each have their own slots to customize the upload and loading indicators. The DropzoneFilesList component can be passed any classes to use.

Loading

Nothing is actually uploaded when a file is selected, as internally a standard html <input type="file"> is used. To show a loading indication initially, you can use the isUploading prop.

You can also use the data-is-uploading attribute to show or hide a loading indicator at any time. This is useful if you want to show a loading indicator while a file is actually being uploaded (like on form submission).

Accept Specific File Types

You can limit the types of files that users can select by using the accept attribute.

Multiple Files

Allow users to select multiple files by using the multiple attribute.

API Reference

Dropzone

The main Dropzone component wraps the entire file upload interface and accepts all standard HTML attributes for <input type="file"> elements, plus the following:

PropTypeDefaultDescription
idstringAuto-generatedUnique identifier for the element
acceptstring-File types the input should accept (e.g., “image/*”, “.pdf”)
multiplebooleanfalseWhether multiple files can be selected
disabledbooleanfalseWhether the input is disabled
requiredbooleanfalseWhether the input is required
namestring-Name of the form input
isUploadingbooleanfalseWhether to show the loading indicator
classstring-Additional CSS classes

Note that the id prop assigns the ID to the <label> element, and the <input> element will get the same ID with “-input” suffix. If no ID is provided, one will be generated for the input field.

Slots:

The Dropzone component provides a default slot to customize the content displayed inside the drop zone. By default, it includes the DropzoneUploadIndicator, DropzoneLoadingIndicator, and DropzoneFilesList components.

DropzoneFilesList

Displays the list of uploaded files.

PropTypeDefaultDescription
classstring-Additional CSS classes

Attributes:

Accepts all standard HTML attributes for <div> elements.

DropzoneUploadIndicator

Displays the upload icon and text that are shown when no files are being uploaded.

Slots:

Provides a default slot to customize the content displayed in the upload indicator. By default, it includes a cloud upload icon and instructional text.

DropzoneLoadingIndicator

Displays a loading spinner and text for use when files are being uploaded.

Slots:

Provides a default slot to customize the content displayed in the loading indicator. By default, it includes a spinning loader icon and text.

Changelog

v1.0.0

  • Initial release with starwind v1.7.0