react-dropzone formData example

dropzone.js

// there's a sandbox to try this out on the react-dropzone website:
// https://react-dropzone.js.org/

import React from 'react';
import {useDropzone} from 'react-dropzone';

function Basic(props) {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
  
  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));
  
  let formData = new FormData()
  
  const fileObjects = acceptedFiles.map(file => {
    console.log(file)
    formData.append('assets', file, file.name)
  })
  
  console.log(formData.getAll('assets'))

  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

<Basic />