You can edit code for any of these examples and see changes live. Open your browser's console to see how RDU manages file metadata and the upload lifecycle.

Standard

Uploads files to https://httpbin.org/post. Logs file metadata to console on submit, and removes files from dropzone using fileWithMeta.remove.

Limits dropzone height with styles prop.

Drag Files or Click to Browse

xxxxxxxxxx
 
const Standard = () => {  const getUploadParams = () => {    return { url: 'https://httpbin.org/post' }  }​  const handleChangeStatus = ({ meta }, status) => {    console.log(status, meta)  }​  const handleSubmit = (files, allFiles) => {    console.log(files.map(f => f.meta))    allFiles.forEach(f => f.remove())  }​  return (    <Dropzone      getUploadParams={getUploadParams}      onChangeStatus={handleChangeStatus}      onSubmit={handleSubmit}      styles={{ dropzone: { minHeight: 200, maxHeight: 250 } }}    />  )}​<Standard />

Only Image, Audio, Video

Only accepts image, audio, and video files. Colors dropzone red on drag if files will be rejected because of file type.

Customization functions that receive (files, extra) allow inputContent and inputLabel style to react to dropzone state.

Also merges extra fileUrl field into file meta.

Drag Files

xxxxxxxxxx
 
const ImageAudioVideo = () => {  const getUploadParams = ({ meta }) => {    const url = 'https://httpbin.org/post'    return { url, meta: { fileUrl: `${url}/${encodeURIComponent(meta.name)}` } }  }​  const handleChangeStatus = ({ meta }, status) => {    console.log(status, meta)  }​  const handleSubmit = (files, allFiles) => {    console.log(files.map(f => f.meta))    allFiles.forEach(f => f.remove())  }​  return (    <Dropzone      getUploadParams={getUploadParams}      onChangeStatus={handleChangeStatus}      onSubmit={handleSubmit}      accept="image/*,audio/*,video/*"      inputContent={(files, extra) => (extra.reject ? 'Image, audio and video files only' : 'Drag Files')}      styles={{        dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },        inputLabel: (files, extra) => (extra.reject ? { color: 'red' } : {}),      }}    />  )}​<ImageAudioVideo />

No Upload

Doesn't upload files. Disables submit button until 3 files have been dropped, dynamically updates number of remaining files.

Drop 3 Files

xxxxxxxxxx
 
const NoUpload = () => {  const handleChangeStatus = ({ meta }, status) => {    console.log(status, meta)  }​  const handleSubmit = (files, allFiles) => {    console.log(files.map(f => f.meta))    allFiles.forEach(f => f.remove())  }​  return (    <Dropzone      onChangeStatus={handleChangeStatus}      onSubmit={handleSubmit}      maxFiles={3}      inputContent="Drop 3 Files"      inputWithFilesContent={files => `${3 - files.length} more`}      submitButtonDisabled={files => files.length < 3}    />  )}​<NoUpload />

Single File, Auto Submit

Automatically removes file from dropzone when it finishes uploading. Limits dropzone to 1 file using maxFiles prop. Doesn't include submit button.

Changes border color for "active" dropzone using styles prop.

Upload

Drop A File

xxxxxxxxxx
 
const SingleFileAutoSubmit = () => {  const toast = (innerHTML) => {    const el = document.getElementById('toast')    el.innerHTML = innerHTML    el.className = 'show'    setTimeout(() => { el.className = el.className.replace('show', '') }, 3000)  }​  const getUploadParams = () => {    return { url: 'https://httpbin.org/post' }  }​  const handleChangeStatus = ({ meta, remove }, status) => {    if (status === 'headers_received') {      toast(`${meta.name} uploaded!`)      remove()    } else if (status === 'aborted') {      toast(`${meta.name}, upload failed...`)    }  }​  return (    <React.Fragment>      <div id="toast">Upload</div>      <Dropzone        getUploadParams={getUploadParams}        onChangeStatus={handleChangeStatus}        maxFiles={1}        multiple={false}        canCancel={false}        inputContent="Drop A File"        styles={{          dropzone: { width: 400, height: 200 },          dropzoneActive: { borderColor: 'green' },        }}      />    </React.Fragment>  )}​<SingleFileAutoSubmit />

Custom Preview

Standard file uploader with custom PreviewComponent. Also disables dropzone while files are being uploaded.

Drop Files (Custom Preview)

xxxxxxxxxx
 
const Preview = ({ meta }) => {  const { name, percent, status } = meta  return (    <span style={{ alignSelf: 'flex-start', margin: '10px 3%', fontFamily: 'Helvetica' }}>      {name}, {Math.round(percent)}%, {status}    </span>  )}​const CustomPreview = () => {  const getUploadParams = () => ({ url: 'https://httpbin.org/post' })​  const handleSubmit = (files, allFiles) => {    console.log(files.map(f => f.meta))    allFiles.forEach(f => f.remove())  }​  return (    <Dropzone      getUploadParams={getUploadParams}      onSubmit={handleSubmit}      PreviewComponent={Preview}      inputContent="Drop Files (Custom Preview)"      disabled={files => files.some(f => ['preparing', 'getting_upload_params', 'uploading'].includes(f.meta.status))}    />  )}​<CustomPreview />

Custom Layout

Custom LayoutComponent. Renders file previews above dropzone, and submit button below it. Uses defaultClassNames and classNames prop to ensure input label style doesn't change when dropzone contains files.

Drop Files (Custom Layout)

xxxxxxxxxx
 
const Layout = ({ input, previews, submitButton, dropzoneProps, files, extra: { maxFiles } }) => {  return (    <div>      {previews}​      <div {...dropzoneProps}>        {files.length < maxFiles && input}      </div>​      {files.length > 0 && submitButton}    </div>  )}​const CustomLayout = () => {  const getUploadParams = () => ({ url: 'https://httpbin.org/post' })​  const handleSubmit = (files, allFiles) => {    console.log(files.map(f => f.meta))    allFiles.forEach(f => f.remove())  }​  return (    <Dropzone      getUploadParams={getUploadParams}      LayoutComponent={Layout}      onSubmit={handleSubmit}      classNames={{ inputLabelWithFiles: defaultClassNames.inputLabel }}      inputContent="Drop Files (Custom Layout)"    />  )}​<CustomLayout />

Custom Input, Directory Drag and Drop

Standard file uploader with custom InputComponent. Passes custom getFilesFromEvent prop, from html5-file-selector library, to allow recursive folder drag and drop.

Choose files

xxxxxxxxxx
 
// import { getDroppedOrSelectedFiles } from 'html5-file-selector'​const Input = ({ accept, onFiles, files, getFilesFromEvent }) => {  const text = files.length > 0 ? 'Add more files' : 'Choose files'​  return (    <label style={{ backgroundColor: '#007bff', color: '#fff', cursor: 'pointer', padding: 15, borderRadius: 3 }}>      {text}      <input        style={{ display: 'none' }}        type="file"        accept={accept}        multiple        onChange={e => {          getFilesFromEvent(e).then(chosenFiles => {            onFiles(chosenFiles)          })        }}      />    </label>  )}​const CustomInput = () => {  const handleSubmit = (files, allFiles) => {    console.log(files.map(f => f.meta))    allFiles.forEach(f => f.remove())  }​  const getFilesFromEvent = e => {    return new Promise(resolve => {      getDroppedOrSelectedFiles(e).then(chosenFiles => {        resolve(chosenFiles.map(f => f.fileObject))      })    })  }​  return (    <Dropzone      accept="image/*,audio/*,video/*,.pdf"      getUploadParams={() => ({ url: 'https://httpbin.org/post' })}      onSubmit={handleSubmit}      InputComponent={Input}      getFilesFromEvent={getFilesFromEvent}    />  )}​<CustomInput />

Dropzone With No Input

If for some reason you want to do this...

Only Drop Files (No Input)

xxxxxxxxxx
 
const { defaultClassNames } = require('../src/Dropzone')​const NoInputLayout = ({ previews, submitButton, dropzoneProps, files }) => {  return (    <div {...dropzoneProps}>      {files.length === 0 &&        <span className={defaultClassNames.inputLabel} style={{ cursor: 'unset' }}>          Only Drop Files (No Input)        </span>      }​      {previews}​      {files.length > 0 && submitButton}    </div>  )}​const DropzoneNoInput = () => {  const getUploadParams = () => ({ url: 'https://httpbin.org/post' })​  const handleSubmit = (files, allFiles) => {    console.log(files.map(f => f.meta))    allFiles.forEach(f => f.remove())  }​  return (    <Dropzone      getUploadParams={getUploadParams}      LayoutComponent={NoInputLayout}      onSubmit={handleSubmit}    />  )}​<DropzoneNoInput />

Input With No Dropzone

User can choose files with input, but can't drop them.

Only Choose Files (No Dropzone)

xxxxxxxxxx
 
const NoDropzoneLayout = ({ previews, submitButton, input, files, dropzoneProps }) => {  const { ref, className, style } = dropzoneProps  return (    <div ref={ref} className={className} style={style}>      {previews}​      {input}​      {files.length > 0 && submitButton}    </div>  )}​const InputNoDropzone = () => {  const getUploadParams = () => ({ url: 'https://httpbin.org/post' })​  const handleSubmit = (files, allFiles) => {    console.log(files.map(f => f.meta))    allFiles.forEach(f => f.remove())  }​  return (    <Dropzone      getUploadParams={getUploadParams}      LayoutComponent={NoDropzoneLayout}      inputContent="Only Choose Files (No Dropzone)"      onSubmit={handleSubmit}    />  )}​<InputNoDropzone />

Initial File From Data URL