useFileUpload1

App.js

import React, { useRef } from 'react'

const App = () => {
  const inputRef = useRef()

  return (
    <div>
      <h1>Upload Files</h1>

      <p>
        Please use the form to your right to upload any file(s) of your
        choosing.
      </p>

      <div className="form-container">
        {/* Display the files to be uploaded */}
        <div>
          <ul></ul>
        </div>

        {/* Provide a drop zone and an alternative button inside it to upload files. */}
        <div>
          <p>Drag and drop files here</p>

          <button onClick={() => inputRef.current.click()}>
            Or select files to upload
          </button>

          {/* Hide the crappy looking default HTML input */}
          <input
            ref={inputRef}
            type="file"
            multiple
            style={{ display: 'none' }}
          />
        </div>
      </div>
    </div>
  )
}