DropZone

A target to drop files or other content on.

Or drag and drop images here.

DropZone.tsx

import {DropZone, DropZoneDescription, DropZoneTrigger} from 'alinea/components'
import {IcRoundUploadFile} from 'alinea/dashboard/icons'

export function DropZoneExample() {
  return (
    <DropZone
      aria-label="Upload product photos"
      accept={['image/*']}
      onDropFiles={files => console.log(files)}
      style={{width: 320}}
    >
      <DropZoneTrigger icon={IcRoundUploadFile}>Browse photos</DropZoneTrigger>
      <DropZoneDescription>Or drag and drop images here.</DropZoneDescription>
    </DropZone>
  )
}

Props

`<DropZone>`

An area files can be dropped on, add a DropZoneTrigger to browse files

PropTypeDefaultDescription

onDropFiles*(files: Array<File>) => voidDefault –Called with the dropped or picked files that match accept

acceptArray<string>Default –Accepted mime types (image/png, image/*) or file extensions (.pdf), every file is accepted if left out

multiplebooleanDefault trueAccept more than one file at a time, defaults to true

disabledbooleanDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<DropZoneTrigger>`

A button that opens the file browser of the surrounding DropZone

Accepts every prop of Button.

`<DropZoneDescription>`

PropTypeDefaultDescription

childrenReactNodeDefault –

Also accepts className and style.