File uploads,
finally done right.

// Files sit idle until the user clicks Upload.
// Use autoUpload=false + showUploadButton together.
<Dropzone
  autoUpload={false}
  showUploadButton
  showClearButton
  uploadButtonLabel="Send files"
  clearButtonLabel="Remove all"
  validation={{ accept: ['image/*', '.pdf'], maxFiles: 5 }}
  onUpload={async (file) => {
    const fd = new FormData()
    fd.append('file', file.file)
    await fetch('/api/upload', { method: 'POST', body: fd })
  }}
  onError={(err) => console.error(err)}
/>

// Custom styling example
<Dropzone
  className="my-wrapper"
  dropzoneClassName="my-drop-area"
  fileListClassName="my-file-list"
/>

import { useFileUpload, FileList } from 'react-dropkit'

export function CustomUpload() {
  const {
    files, isDragActive, isDragReject,
    getRootProps, getInputProps, inputRef,
    removeFile, uploadAll, clearFiles,
  } = useFileUpload({
    multiple: true,
    validation: { accept: ['image/*'] },
    onUpload: async (file) => { /* your logic */ },
  })

  return (
    <div>
      <div {...getRootProps()}
        style={{ border: `2px dashed ${isDragReject ? 'red' : 'gray'}` }}
      >
        <input {...getInputProps()} ref={inputRef} />
        <p>{isDragActive ? 'Drop here!' : 'Click or drag'}</p>
      </div>
      <FileList files={files} onRemove={removeFile} />
      <button onClick={uploadAll}>Upload All</button>
    </div>
  )
}

import { useState } from 'react'
import { useFileUpload } from 'react-dropkit'

export function ProfileForm() {
  const [name, setName] = useState('')
  const { files, getRootProps, getInputProps, inputRef } = useFileUpload({
    multiple: false,
    validation: { accept: ['image/*'] },
  })

  const handleSubmit = async (e) => {
    e.preventDefault()
    const fd = new FormData()
    fd.append('name', name)
    if (files[0]) fd.append('avatar', files[0].file)
    await fetch('/api/profile', { method: 'POST', body: fd })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} />
      <div {...getRootProps()}>
        <input {...getInputProps()} ref={inputRef} />
        <p>Drop avatar here</p>
      </div>
      <button type="submit">Save Profile</button>
    </form>
  )
}

import { useFileUpload } from 'react-dropkit'

export function AvatarUpload() {
  const { files, getRootProps, getInputProps, inputRef } = useFileUpload({
    multiple: false,
    validation: { accept: ['image/*'], maxSize: 2 * 1024 * 1024 },
  })

  return (
    <div {...getRootProps()}
      style={{ width: 96, height: 96, borderRadius: '50%', cursor: 'pointer' }}
    >
      <input {...getInputProps()} ref={inputRef} />
      {files[0]?.preview
        ? <img src={files[0].preview} style={{ borderRadius: '50%' }} />
        : <span>Upload photo</span>
      }
    </div>
  )
}

<Dropzone
  onUpload={(file) => new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    const fd = new FormData()
    fd.append('file', file.file)

    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) {
        // real progress from the server
        const pct = Math.round((e.loaded / e.total) * 100)
      }
    }

    xhr.onload = () =>
      xhr.status === 200 ? resolve() : reject(new Error('Failed'))
    xhr.onerror = () => reject(new Error('Network error'))
    xhr.open('POST', '/api/upload')
    xhr.send(fd)
  })}
/>