siam-ui-utils 2.2.18 → 2.2.19

package/src/dropzone/Dropzone.tsx

@@ -0,0 +1,816 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import LayoutDefault from './Layout'
+import InputDefault from './Input'
+import PreviewDefault from './Preview'
+import SubmitButtonDefault from './SubmitButton'
+import {
+  formatBytes,
+  formatDuration,
+  accepts,
+  resolveValue,
+  mergeStyles,
+  defaultClassNames,
+  getFilesFromEvent as defaultGetFilesFromEvent,
+} from './utils'
+
+export type StatusValue =
+  | 'rejected_file_type'
+  | 'rejected_max_files'
+  | 'preparing'
+  | 'error_file_size'
+  | 'error_validation'
+  | 'ready'
+  | 'started'
+  | 'getting_upload_params'
+  | 'error_upload_params'
+  | 'uploading'
+  | 'exception_upload'
+  | 'aborted'
+  | 'restarted'
+  | 'removed'
+  | 'error_upload'
+  | 'headers_received'
+  | 'done'
+
+export type MethodValue =
+  | 'delete'
+  | 'get'
+  | 'head'
+  | 'options'
+  | 'patch'
+  | 'post'
+  | 'put'
+  | 'DELETE'
+  | 'GET'
+  | 'HEAD'
+  | 'OPTIONS'
+  | 'PATCH'
+  | 'POST'
+  | 'PUT'
+
+export interface IMeta {
+  id: string
+  status: StatusValue
+  type: string // MIME type, example: `image/*`
+  name: string
+  uploadedDate: string // ISO string
+  percent: number
+  size: number // bytes
+  lastModifiedDate: string // ISO string
+  previewUrl?: string // from URL.createObjectURL
+  duration?: number // seconds
+  width?: number
+  height?: number
+  videoWidth?: number
+  videoHeight?: number
+  validationError?: any
+}
+
+export interface IFileWithMeta {
+  file: File
+  meta: IMeta
+  cancel: () => void
+  restart: () => void
+  remove: () => void
+  xhr?: XMLHttpRequest
+}
+
+export interface IExtra {
+  active: boolean
+  reject: boolean
+  dragged: DataTransferItem[]
+  accept: string
+  multiple: boolean
+  minSizeBytes: number
+  maxSizeBytes: number
+  maxFiles: number
+}
+
+export interface IUploadParams {
+  url: string
+  method?: MethodValue
+  body?: string | FormData | ArrayBuffer | Blob | File | URLSearchParams
+  fields?: { [name: string]: string | Blob }
+  headers?: { [name: string]: string }
+  meta?: { [name: string]: any }
+}
+
+export type CustomizationFunction<T> = (allFiles: IFileWithMeta[], extra: IExtra) => T
+
+export interface IStyleCustomization<T> {
+  dropzone?: T | CustomizationFunction<T>
+  dropzoneActive?: T | CustomizationFunction<T>
+  dropzoneReject?: T | CustomizationFunction<T>
+  dropzoneDisabled?: T | CustomizationFunction<T>
+  input?: T | CustomizationFunction<T>
+  inputLabel?: T | CustomizationFunction<T>
+  inputLabelWithFiles?: T | CustomizationFunction<T>
+  preview?: T | CustomizationFunction<T>
+  previewImage?: T | CustomizationFunction<T>
+  submitButtonContainer?: T | CustomizationFunction<T>
+  submitButton?: T | CustomizationFunction<T>
+}
+
+export interface IExtraLayout extends IExtra {
+  onFiles(files: File[]): void
+  onCancelFile(file: IFileWithMeta): void
+  onRemoveFile(file: IFileWithMeta): void
+  onRestartFile(file: IFileWithMeta): void
+}
+
+export interface ILayoutProps {
+  files: IFileWithMeta[]
+  extra: IExtraLayout
+  input: React.ReactNode
+  previews: React.ReactNode[] | null
+  submitButton: React.ReactNode
+  dropzoneProps: {
+    ref: React.RefObject<HTMLDivElement>
+    className: string
+    style?: React.CSSProperties
+    onDragEnter(event: React.DragEvent<HTMLElement>): void
+    onDragOver(event: React.DragEvent<HTMLElement>): void
+    onDragLeave(event: React.DragEvent<HTMLElement>): void
+    onDrop(event: React.DragEvent<HTMLElement>): void
+  }
+}
+
+interface ICommonProps {
+  files: IFileWithMeta[]
+  extra: IExtra
+}
+
+export interface IPreviewProps extends ICommonProps {
+  meta: IMeta
+  className?: string
+  imageClassName?: string
+  style?: React.CSSProperties
+  imageStyle?: React.CSSProperties
+  fileWithMeta: IFileWithMeta
+  isUpload: boolean
+  canCancel: boolean
+  canRemove: boolean
+  canRestart: boolean
+}
+
+export interface IInputProps extends ICommonProps {
+  className?: string
+  labelClassName?: string
+  labelWithFilesClassName?: string
+  style?: React.CSSProperties
+  labelStyle?: React.CSSProperties
+  labelWithFilesStyle?: React.CSSProperties
+  getFilesFromEvent: (event: React.ChangeEvent<HTMLInputElement>) => Promise<File[]>
+  accept: string
+  multiple: boolean
+  disabled: boolean
+  content?: React.ReactNode
+  withFilesContent?: React.ReactNode
+  onFiles: (files: File[]) => void
+}
+
+export interface ISubmitButtonProps extends ICommonProps {
+  className?: string
+  buttonClassName?: string
+  style?: React.CSSProperties
+  buttonStyle?: React.CSSProperties
+  disabled: boolean
+  content?: React.ReactNode
+  onSubmit: (files: IFileWithMeta[]) => void
+}
+
+type ReactComponent<Props> = (props: Props) => React.ReactNode | React.Component<Props>
+
+export interface IDropzoneProps {
+  onChangeStatus?(
+    file: IFileWithMeta,
+    status: StatusValue,
+    allFiles: IFileWithMeta[],
+  ): { meta: { [name: string]: any } } | void
+  getUploadParams?(file: IFileWithMeta): IUploadParams | Promise<IUploadParams>
+  onSubmit?(successFiles: IFileWithMeta[], allFiles: IFileWithMeta[]): void
+
+  getFilesFromEvent?: (
+    event: React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>,
+  ) => Promise<File[]> | File[]
+  getDataTransferItemsFromEvent?: (
+    event: React.DragEvent<HTMLElement>,
+  ) => Promise<DataTransferItem[]> | DataTransferItem[]
+
+  accept: string
+  multiple: boolean
+  minSizeBytes: number
+  maxSizeBytes: number
+  maxFiles: number
+
+  validate?(file: IFileWithMeta): any // usually a string, but can be anything
+
+  autoUpload: boolean
+  timeout?: number
+
+  initialFiles?: File[]
+
+  /* component customization */
+  disabled: boolean | CustomizationFunction<boolean>
+
+  canCancel: boolean | CustomizationFunction<boolean>
+  canRemove: boolean | CustomizationFunction<boolean>
+  canRestart: boolean | CustomizationFunction<boolean>
+
+  inputContent: React.ReactNode | CustomizationFunction<React.ReactNode>
+  inputWithFilesContent: React.ReactNode | CustomizationFunction<React.ReactNode>
+
+  submitButtonDisabled: boolean | CustomizationFunction<boolean>
+  submitButtonContent: React.ReactNode | CustomizationFunction<React.ReactNode>
+
+  classNames: IStyleCustomization<string>
+  styles: IStyleCustomization<React.CSSProperties>
+  addClassNames: IStyleCustomization<string>
+
+  /* component injection */
+  LayoutComponent?: ReactComponent<ILayoutProps>
+  PreviewComponent?: ReactComponent<IPreviewProps>
+  InputComponent?: ReactComponent<IInputProps>
+  SubmitButtonComponent?: ReactComponent<ISubmitButtonProps>
+}
+
+class Dropzone extends React.Component<IDropzoneProps, { active: boolean; dragged: (File | DataTransferItem)[] }> {
+  static defaultProps: IDropzoneProps
+  protected files: IFileWithMeta[]
+  protected mounted: boolean
+  protected dropzone: React.RefObject<HTMLDivElement>
+  protected dragTimeoutId?: number
+
+  constructor(props: IDropzoneProps) {
+    super(props)
+    this.state = {
+      active: false,
+      dragged: [],
+    }
+    this.files = []
+    this.mounted = true
+    this.dropzone = React.createRef()
+  }
+
+  componentDidMount() {
+    if (this.props.initialFiles) this.handleFiles(this.props.initialFiles)
+  }
+
+  componentDidUpdate(prevProps: IDropzoneProps) {
+    const { initialFiles } = this.props
+    if (prevProps.initialFiles !== initialFiles && initialFiles) this.handleFiles(initialFiles)
+  }
+
+  componentWillUnmount() {
+    this.mounted = false
+    for (const fileWithMeta of this.files) this.handleCancel(fileWithMeta)
+  }
+
+  forceUpdate = () => {
+    if (this.mounted) super.forceUpdate()
+  }
+
+  getFilesFromEvent = () => {
+    return this.props.getFilesFromEvent || defaultGetFilesFromEvent
+  }
+
+  getDataTransferItemsFromEvent = () => {
+    return this.props.getDataTransferItemsFromEvent || defaultGetFilesFromEvent
+  }
+
+  handleDragEnter = async (e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const dragged = (await this.getDataTransferItemsFromEvent()(e)) as DataTransferItem[]
+    this.setState({ active: true, dragged })
+  }
+
+  handleDragOver = async (e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    clearTimeout(this.dragTimeoutId)
+    const dragged = await this.getDataTransferItemsFromEvent()(e)
+    this.setState({ active: true, dragged })
+  }
+
+  handleDragLeave = (e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    // prevents repeated toggling of `active` state when file is dragged over children of uploader
+    // see: https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/
+    this.dragTimeoutId = window.setTimeout(() => this.setState({ active: false, dragged: [] }), 150)
+  }
+
+  handleDrop = async (e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    this.setState({ active: false, dragged: [] })
+    const files = (await this.getFilesFromEvent()(e)) as File[]
+    this.handleFiles(files)
+  }
+
+  handleDropDisabled = (e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    this.setState({ active: false, dragged: [] })
+  }
+
+  handleChangeStatus = (fileWithMeta: IFileWithMeta) => {
+    if (!this.props.onChangeStatus) return
+    const { meta = {} } = this.props.onChangeStatus(fileWithMeta, fileWithMeta.meta.status, this.files) || {}
+    if (meta) {
+      delete meta.status
+      fileWithMeta.meta = { ...fileWithMeta.meta, ...meta }
+      this.forceUpdate()
+    }
+  }
+
+  handleSubmit = (files: IFileWithMeta[]) => {
+    if (this.props.onSubmit) this.props.onSubmit(files, [...this.files])
+  }
+
+  handleCancel = (fileWithMeta: IFileWithMeta) => {
+    if (fileWithMeta.meta.status !== 'uploading') return
+    fileWithMeta.meta.status = 'aborted'
+    if (fileWithMeta.xhr) fileWithMeta.xhr.abort()
+    this.handleChangeStatus(fileWithMeta)
+    this.forceUpdate()
+  }
+
+  handleRemove = (fileWithMeta: IFileWithMeta) => {
+    const index = this.files.findIndex(f => f === fileWithMeta)
+    if (index !== -1) {
+      URL.revokeObjectURL(fileWithMeta.meta.previewUrl || '')
+      fileWithMeta.meta.status = 'removed'
+      this.handleChangeStatus(fileWithMeta)
+      this.files.splice(index, 1)
+      this.forceUpdate()
+    }
+  }
+
+  handleRestart = (fileWithMeta: IFileWithMeta) => {
+    if (!this.props.getUploadParams) return
+
+    if (fileWithMeta.meta.status === 'ready') fileWithMeta.meta.status = 'started'
+    else fileWithMeta.meta.status = 'restarted'
+    this.handleChangeStatus(fileWithMeta)
+
+    fileWithMeta.meta.status = 'getting_upload_params'
+    fileWithMeta.meta.percent = 0
+    this.handleChangeStatus(fileWithMeta)
+    this.forceUpdate()
+    this.uploadFile(fileWithMeta)
+  }
+
+  // expects an array of File objects
+  handleFiles = (files: File[]) => {
+    files.forEach((f, i) => this.handleFile(f, `${new Date().getTime()}-${i}`))
+    const { current } = this.dropzone
+    if (current) setTimeout(() => current.scroll({ top: current.scrollHeight, behavior: 'smooth' }), 150)
+  }
+
+  handleFile = async (file: File, id: string) => {
+    const { name, size, type, lastModified } = file
+    const { minSizeBytes, maxSizeBytes, maxFiles, accept, getUploadParams, autoUpload, validate } = this.props
+
+    const uploadedDate = new Date().toISOString()
+    const lastModifiedDate = lastModified && new Date(lastModified).toISOString()
+    const fileWithMeta = {
+      file,
+      meta: { name, size, type, lastModifiedDate, uploadedDate, percent: 0, id },
+    } as IFileWithMeta
+
+    // firefox versions prior to 53 return a bogus mime type for file drag events,
+    // so files with that mime type are always accepted
+    if (file.type !== 'application/x-moz-file' && !accepts(file, accept)) {
+      fileWithMeta.meta.status = 'rejected_file_type'
+      this.handleChangeStatus(fileWithMeta)
+      return
+    }
+    if (this.files.length >= maxFiles) {
+      fileWithMeta.meta.status = 'rejected_max_files'
+      this.handleChangeStatus(fileWithMeta)
+      return
+    }
+
+    fileWithMeta.cancel = () => this.handleCancel(fileWithMeta)
+    fileWithMeta.remove = () => this.handleRemove(fileWithMeta)
+    fileWithMeta.restart = () => this.handleRestart(fileWithMeta)
+
+    fileWithMeta.meta.status = 'preparing'
+    this.files.push(fileWithMeta)
+    this.handleChangeStatus(fileWithMeta)
+    this.forceUpdate()
+
+    if (size < minSizeBytes || size > maxSizeBytes) {
+      fileWithMeta.meta.status = 'error_file_size'
+      this.handleChangeStatus(fileWithMeta)
+      this.forceUpdate()
+      return
+    }
+
+    await this.generatePreview(fileWithMeta)
+
+    if (validate) {
+      const error = validate(fileWithMeta)
+      if (error) {
+        fileWithMeta.meta.status = 'error_validation'
+        fileWithMeta.meta.validationError = error // usually a string, but doesn't have to be
+        this.handleChangeStatus(fileWithMeta)
+        this.forceUpdate()
+        return
+      }
+    }
+
+    if (getUploadParams) {
+      if (autoUpload) {
+        this.uploadFile(fileWithMeta)
+        fileWithMeta.meta.status = 'getting_upload_params'
+      } else {
+        fileWithMeta.meta.status = 'ready'
+      }
+    } else {
+      fileWithMeta.meta.status = 'done'
+    }
+    this.handleChangeStatus(fileWithMeta)
+    this.forceUpdate()
+  }
+
+  generatePreview = async (fileWithMeta: IFileWithMeta) => {
+    const {
+      meta: { type },
+      file,
+    } = fileWithMeta
+    const isImage = type.startsWith('image/')
+    const isAudio = type.startsWith('audio/')
+    const isVideo = type.startsWith('video/')
+    if (!isImage && !isAudio && !isVideo) return
+
+    const objectUrl = URL.createObjectURL(file)
+
+    const fileCallbackToPromise = (fileObj: HTMLImageElement | HTMLAudioElement) => {
+      return Promise.race([
+        new Promise(resolve => {
+          if (fileObj instanceof HTMLImageElement) fileObj.onload = resolve
+          else fileObj.onloadedmetadata = resolve
+        }),
+        new Promise((_, reject) => {
+          setTimeout(reject, 1000)
+        }),
+      ])
+    }
+
+    try {
+      if (isImage) {
+        const img = new Image()
+        img.src = objectUrl
+        fileWithMeta.meta.previewUrl = objectUrl
+        await fileCallbackToPromise(img)
+        fileWithMeta.meta.width = img.width
+        fileWithMeta.meta.height = img.height
+      }
+
+      if (isAudio) {
+        const audio = new Audio()
+        audio.src = objectUrl
+        await fileCallbackToPromise(audio)
+        fileWithMeta.meta.duration = audio.duration
+      }
+
+      if (isVideo) {
+        const video = document.createElement('video')
+        video.src = objectUrl
+        await fileCallbackToPromise(video)
+        fileWithMeta.meta.duration = video.duration
+        fileWithMeta.meta.videoWidth = video.videoWidth
+        fileWithMeta.meta.videoHeight = video.videoHeight
+      }
+      if (!isImage) URL.revokeObjectURL(objectUrl)
+    } catch (e) {
+      URL.revokeObjectURL(objectUrl)
+    }
+    this.forceUpdate()
+  }
+
+  uploadFile = async (fileWithMeta: IFileWithMeta) => {
+    const { getUploadParams } = this.props
+    if (!getUploadParams) return
+    let params: IUploadParams | null = null
+    try {
+      params = await getUploadParams(fileWithMeta)
+    } catch (e) {
+      console.error('Error Upload Params', e.stack)
+    }
+    if (params === null) return
+    const { url, method = 'POST', body, fields = {}, headers = {}, meta: extraMeta = {} } = params
+    delete extraMeta.status
+
+    if (!url) {
+      fileWithMeta.meta.status = 'error_upload_params'
+      this.handleChangeStatus(fileWithMeta)
+      this.forceUpdate()
+      return
+    }
+
+    const xhr = new XMLHttpRequest()
+    const formData = new FormData()
+    xhr.open(method, url, true)
+
+    for (const field of Object.keys(fields)) formData.append(field, fields[field])
+    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
+    for (const header of Object.keys(headers)) xhr.setRequestHeader(header, headers[header])
+    fileWithMeta.meta = { ...fileWithMeta.meta, ...extraMeta }
+
+    // update progress (can be used to show progress indicator)
+    xhr.upload.addEventListener('progress', e => {
+      fileWithMeta.meta.percent = (e.loaded * 100.0) / e.total || 100
+      this.forceUpdate()
+    })
+
+    xhr.addEventListener('readystatechange', () => {
+      // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
+      if (xhr.readyState !== 2 && xhr.readyState !== 4) return
+
+      if (xhr.status === 0 && fileWithMeta.meta.status !== 'aborted') {
+        fileWithMeta.meta.status = 'exception_upload'
+        this.handleChangeStatus(fileWithMeta)
+        this.forceUpdate()
+      }
+
+      if (xhr.status > 0 && xhr.status < 400) {
+        fileWithMeta.meta.percent = 100
+        if (xhr.readyState === 2) fileWithMeta.meta.status = 'headers_received'
+        if (xhr.readyState === 4) fileWithMeta.meta.status = 'done'
+        this.handleChangeStatus(fileWithMeta)
+        this.forceUpdate()
+      }
+
+      if (xhr.status >= 400 && fileWithMeta.meta.status !== 'error_upload') {
+        fileWithMeta.meta.status = 'error_upload'
+        this.handleChangeStatus(fileWithMeta)
+        this.forceUpdate()
+      }
+    })
+
+    formData.append('file', fileWithMeta.file)
+    if (this.props.timeout) xhr.timeout = this.props.timeout
+    xhr.send(body || formData)
+    fileWithMeta.xhr = xhr
+    fileWithMeta.meta.status = 'uploading'
+    this.handleChangeStatus(fileWithMeta)
+    this.forceUpdate()
+  }
+
+  render() {
+    const {
+      accept,
+      multiple,
+      maxFiles,
+      minSizeBytes,
+      maxSizeBytes,
+      onSubmit,
+      getUploadParams,
+      disabled,
+      canCancel,
+      canRemove,
+      canRestart,
+      inputContent,
+      inputWithFilesContent,
+      submitButtonDisabled,
+      submitButtonContent,
+      classNames,
+      styles,
+      addClassNames,
+      InputComponent,
+      PreviewComponent,
+      SubmitButtonComponent,
+      LayoutComponent,
+    } = this.props
+
+    const { active, dragged } = this.state
+
+    const reject = dragged.some(file => file.type !== 'application/x-moz-file' && !accepts(file as File, accept))
+    const extra = { active, reject, dragged, accept, multiple, minSizeBytes, maxSizeBytes, maxFiles } as IExtra
+    const files = [...this.files]
+    const dropzoneDisabled = resolveValue(disabled, files, extra)
+
+    const {
+      classNames: {
+        dropzone: dropzoneClassName,
+        dropzoneActive: dropzoneActiveClassName,
+        dropzoneReject: dropzoneRejectClassName,
+        dropzoneDisabled: dropzoneDisabledClassName,
+        input: inputClassName,
+        inputLabel: inputLabelClassName,
+        inputLabelWithFiles: inputLabelWithFilesClassName,
+        preview: previewClassName,
+        previewImage: previewImageClassName,
+        submitButtonContainer: submitButtonContainerClassName,
+        submitButton: submitButtonClassName,
+      },
+      styles: {
+        dropzone: dropzoneStyle,
+        dropzoneActive: dropzoneActiveStyle,
+        dropzoneReject: dropzoneRejectStyle,
+        dropzoneDisabled: dropzoneDisabledStyle,
+        input: inputStyle,
+        inputLabel: inputLabelStyle,
+        inputLabelWithFiles: inputLabelWithFilesStyle,
+        preview: previewStyle,
+        previewImage: previewImageStyle,
+        submitButtonContainer: submitButtonContainerStyle,
+        submitButton: submitButtonStyle,
+      },
+    } = mergeStyles(classNames, styles, addClassNames, files, extra)
+
+    const Input = InputComponent || InputDefault
+    const Preview = PreviewComponent || PreviewDefault
+    const SubmitButton = SubmitButtonComponent || SubmitButtonDefault
+    const Layout = LayoutComponent || LayoutDefault
+
+    let previews = null
+    if (PreviewComponent !== null) {
+      previews = files.map(f => {
+        return (
+          //@ts-ignore
+          <Preview
+            className={previewClassName}
+            imageClassName={previewImageClassName}
+            style={previewStyle as React.CSSProperties}
+            imageStyle={previewImageStyle as React.CSSProperties}
+            key={f.meta.id}
+            fileWithMeta={f}
+            meta={{ ...f.meta }}
+            isUpload={Boolean(getUploadParams)}
+            canCancel={resolveValue(canCancel, files, extra)}
+            canRemove={resolveValue(canRemove, files, extra)}
+            canRestart={resolveValue(canRestart, files, extra)}
+            files={files}
+            extra={extra}
+          />
+        )
+      })
+    }
+
+    const input =
+      InputComponent !== null ? (
+        //@ts-ignore
+        <Input
+          className={inputClassName}
+          labelClassName={inputLabelClassName}
+          labelWithFilesClassName={inputLabelWithFilesClassName}
+          style={inputStyle as React.CSSProperties}
+          labelStyle={inputLabelStyle as React.CSSProperties}
+          labelWithFilesStyle={inputLabelWithFilesStyle as React.CSSProperties}
+          getFilesFromEvent={this.getFilesFromEvent() as IInputProps['getFilesFromEvent']}
+          accept={accept}
+          multiple={multiple}
+          disabled={dropzoneDisabled}
+          content={resolveValue(inputContent, files, extra)}
+          withFilesContent={resolveValue(inputWithFilesContent, files, extra)}
+          onFiles={this.handleFiles} // see: https://stackoverflow.com/questions/39484895
+          files={files}
+          extra={extra}
+        />
+      ) : null
+
+    const submitButton =
+      onSubmit && SubmitButtonComponent !== null ? (
+        //@ts-ignore
+        <SubmitButton
+          className={submitButtonContainerClassName}
+          buttonClassName={submitButtonClassName}
+          style={submitButtonContainerStyle as React.CSSProperties}
+          buttonStyle={submitButtonStyle as React.CSSProperties}
+          disabled={resolveValue(submitButtonDisabled, files, extra)}
+          content={resolveValue(submitButtonContent, files, extra)}
+          onSubmit={this.handleSubmit}
+          files={files}
+          extra={extra}
+        />
+      ) : null
+
+    let className = dropzoneClassName
+    let style = dropzoneStyle
+
+    if (dropzoneDisabled) {
+      className = `${className} ${dropzoneDisabledClassName}`
+      style = { ...(style || {}), ...(dropzoneDisabledStyle || {}) }
+    } else if (reject) {
+      className = `${className} ${dropzoneRejectClassName}`
+      style = { ...(style || {}), ...(dropzoneRejectStyle || {}) }
+    } else if (active) {
+      className = `${className} ${dropzoneActiveClassName}`
+      style = { ...(style || {}), ...(dropzoneActiveStyle || {}) }
+    }
+
+    return (
+      //@ts-ignore
+      <Layout
+        input={input}
+        previews={previews}
+        submitButton={submitButton}
+        dropzoneProps={{
+          ref: this.dropzone,
+          className,
+          style: style as React.CSSProperties,
+          onDragEnter: this.handleDragEnter,
+          onDragOver: this.handleDragOver,
+          onDragLeave: this.handleDragLeave,
+          onDrop: dropzoneDisabled ? this.handleDropDisabled : this.handleDrop,
+        }}
+        files={files}
+        extra={
+          {
+            ...extra,
+            onFiles: this.handleFiles,
+            onCancelFile: this.handleCancel,
+            onRemoveFile: this.handleRemove,
+            onRestartFile: this.handleRestart,
+          } as IExtraLayout
+        }
+      />
+    )
+  }
+}
+
+Dropzone.defaultProps = {
+  accept: '*',
+  multiple: true,
+  minSizeBytes: 0,
+  maxSizeBytes: Number.MAX_SAFE_INTEGER,
+  maxFiles: Number.MAX_SAFE_INTEGER,
+  autoUpload: true,
+  disabled: false,
+  canCancel: true,
+  canRemove: true,
+  canRestart: true,
+  inputContent: 'Drag Files or Click to Browse',
+  inputWithFilesContent: 'Add Files',
+  submitButtonDisabled: false,
+  submitButtonContent: 'Submit',
+  classNames: {},
+  styles: {},
+  addClassNames: {},
+}
+
+// @ts-ignore
+Dropzone.propTypes = {
+  onChangeStatus: PropTypes.func,
+  getUploadParams: PropTypes.func,
+  onSubmit: PropTypes.func,
+
+  getFilesFromEvent: PropTypes.func,
+  getDataTransferItemsFromEvent: PropTypes.func,
+
+  accept: PropTypes.string,
+  multiple: PropTypes.bool,
+  minSizeBytes: PropTypes.number.isRequired,
+  maxSizeBytes: PropTypes.number.isRequired,
+  maxFiles: PropTypes.number.isRequired,
+
+  validate: PropTypes.func,
+
+  autoUpload: PropTypes.bool,
+  timeout: PropTypes.number,
+
+  initialFiles: PropTypes.arrayOf(PropTypes.any),
+
+  /* component customization */
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+
+  canCancel: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  canRemove: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  canRestart: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+
+  inputContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  inputWithFilesContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+
+  submitButtonDisabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  submitButtonContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+
+  classNames: PropTypes.object.isRequired,
+  styles: PropTypes.object.isRequired,
+  addClassNames: PropTypes.object.isRequired,
+
+  /* component injection */
+  InputComponent: PropTypes.func,
+  PreviewComponent: PropTypes.func,
+  SubmitButtonComponent: PropTypes.func,
+  LayoutComponent: PropTypes.func,
+}
+
+export default Dropzone
+export {
+  LayoutDefault as Layout,
+  InputDefault as Input,
+  PreviewDefault as Preview,
+  SubmitButtonDefault as SubmitButton,
+  formatBytes,
+  formatDuration,
+  accepts,
+  defaultClassNames,
+  defaultGetFilesFromEvent as getFilesFromEvent,
+}