Components

DropArea

<DropArea />

Constructor

# <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>
  )
}

View Source admin-bro/src/frontend/components/app/drop-area.tsx, line 150

Example

Type Definitions

object

# Props

Properties:
Name Type Attributes Description
fileObject FileObject <optional>

When given UI will show that file of this name and this size has been set.

onUpload OnUpload

Callback performed when the file is dropped/selected

propertyName string

Name of the property - used as an input id.

validate object <optional>

Validate options

[validate].maxSize number <optional>

Maximum size of the uploaded file in bytes. If not defined - all files are allowed.

[validate].mimeTypes Array.<string> <optional>

Available mime types. When not defined - all mime types are allowed.

View Source admin-bro/src/frontend/components/app/drop-area.tsx, line 231

object

# FileObject

Properties:
Name Type Attributes Description
size number

File size in bytes

name string

Original file name

type string <optional>

Mime Type

file Buffer <optional>

Actual file buffer.

View Source admin-bro/src/frontend/components/app/drop-area.tsx, line 222

# OnUpload(files) → {void}

Parameters:
Name Type Description
files FileList | null

View Source admin-bro/src/frontend/components/app/drop-area.tsx, line 215

void