DropArea

Drop Area which can be used for uploading files.

how to use it in your custom component.tsx:

import React, { useState } from 'react'
import { DropArea, PropertyInEdit, BasePropertyProps } from 'admin-bro'
import { unflatten } from 'flat'

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

  const fileObject = unflatten(record.params)[property.name]

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

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

  return (
    <PropertyInEdit property={property}>
      <DropArea
        fileObject={fileObject}
        onUpload={onUpload}
        propertyName={property.name}
      />
    </PropertyInEdit>
  )
}