v2.0.8

Drop Zone

Experimental

This component is considered experimental. Reach out to the Spark team to find out more about what this means.

Edit this page

Installation

Install yarn add @spark-web/dropzone

npm @spark-web/dropzone

Source GitHub.com

Bundle unpkg.com

The Dropzone component lets users upload files by clicking on, or dragging and dropping onto the "drop zone". It can also be be triggered by clicking on the label.

Usage

Field

Each Dropzone must be accompanied by a Field with a label. Effective form labeling helps inform users which selection to make.

Examples

Accept

By providing an accept prop, we can make the Dropzone only accept certain file types.

Accepted MIME types:

audio/*
audio/mpeg
audio/wav
image/*
image/gif
image/heic
image/jpeg
image/png
image/svg+xml
image/tiff
image/webp
text/*
text/csv
text/plain
text/rtf
video/*
video/mp4
video/mpeg
application/msword
application/pdf
application/rtf
application/vnd.ms-excel
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.xlsx)
application/vnd.openxmlformats-officedocument.wordprocessingml.document (.docx)
application/zip

Upload image

Accepts common image file formats

Upload PDF

Only accepts PDF files

Open in Playroom

<Stack gap="large">
  <Field label="Upload image" description="Accepts common image file formats">
    <Dropzone accept={['image/jpeg', 'image/png']} />
  </Field>
  <Field label="Upload PDF" description="Only accepts PDF files">
    <Dropzone accept="application/pdf" />
  </Field>
</Stack>

<Stack gap="large">
  <Field label="Upload image" description="Accepts common image file formats">
    <Dropzone accept={['image/jpeg', 'image/png']} />
  </Field>
  <Field label="Upload PDF" description="Only accepts PDF files">
    <Dropzone accept="application/pdf" />
  </Field>
</Stack>

Show Image Thumbnails

By default, once a file as been added to the Dropzone, a document icon will displayed next to the file name in the list below. If you have uploaded an image, you can use the showImageThumbnails to show an image preview instead.

Upload image

Drop an image here to see a preview

Open in Playroom

<Field label="Upload image" description="Drop an image here to see a preview">
  <Dropzone accept="image/jpeg" showImageThumbnails />
</Field>

<Field label="Upload image" description="Drop an image here to see a preview">
  <Dropzone accept="image/jpeg" showImageThumbnails />
</Field>

Props

Prop	Type	Description
accept?	"audio/" \| "audio/mpeg" \| "audio/wav" \| "image/" \| "image/gif" \| "image/heic" \| "image/jpeg" \| "image/png" \| "image/svg+xml" \| "image/tiff" \| "image/webp" \| "text/" \| "text/csv" \| ... 12 more ... \| ("audio/" \| ... 23 more ... \| "application/zip")[]	File type(s) that the Dropzone should be allowed to accept.
maxFiles?	number	Maximum number of files that the Dropzone should be allowed to accept. Default: `1`
maxFileSizeKb?	number	Maximum file size that the Dropzone should be allowed to accept. Value should be provided in kB
minFileSizeKb?	number	Minimum file size that the Dropzone should be allowed to accept. Value should be provided in kB
showImageThumbnails?	boolean	When true, renders an image preview next to file previews.