DropZone which can be used for uploading files.

usage

import { DropZone, DropZoneProps } from '@adminjs/design-system'

how to use it in your custom component.tsx (TypesScript):

import React, { useState } from 'react'
import { DropZone, Label, BasePropertyProps } from '@adminjs/design-system'
import { unflatten } from 'flat'

const UploadPhoto: React.FC<BasePropertyProps> = (props) => {
  const { property, record, onChange } = props

  const onUpload = (files: FileList) => {
    const newRecord = {...record}
    const file = files.length && files[0]

    onChange({
      ...newRecord,
      params: {
        ...newRecord.params,
        [property.name]: file,
      }
    })
    event.preventDefault()
  }

  return (
    <Box>
      <Label>{property.label}</Label>
      <DropZone onChange={onUpload} />
    </Box>
  )
}

See:

FileSizeUnit
OnDropDownChange
DropZoneProps
Storybook

View Source adminjs-design-system/src/molecules/drop-zone/drop-zone.tsx, line 131

Examples

Single file with validation

Multi file of photos

Type Definitions

Type: object

# DropZoneProps

Properties:

Name	Type	Attributes	Description
`multiple`	`boolean`	<optional>	if drop zone should handle multiple uploads
`files`	`Array.<File>`	<optional>	Initial files collection (in case you want to hold files state)
`onChange`	`OnDropZoneChange`	<optional>	Callback performed when the file is dropped/selected
`validate`	`object`	<optional>	Validate options
`maxSize`	`number`	<optional>	Maximum size of the uploaded file in bytes. If not defined - all files are allowed.
`mimeTypes`	`Array.<string>`	<optional>	Available mime types. When not defined - all mime types are allowed.
`uploadLimitIn`	`FileSizeUnit`	<optional>	Upload limit display e.g.: 'KB' (upper case)

View Source adminjs-design-system/src/molecules/drop-zone/drop-zone.tsx, line 231

# OnDropZoneChange(files) → {void}

Parameters:

Name	Type	Description
`files`	`Array.<File>`

View Source adminjs-design-system/src/molecules/drop-zone/drop-zone.tsx, line 224

Returns:

Type: void