Components

DropZone

<DropZone />

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:

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

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

void