Upload 5

index.jsx

const Upload = () => {
  const [files, setFiles] = useState(null)
  const inputRef = useRef()

  const handleClick = () => {
    inputRef.current.click()
  }

  const preventBubbling = (e) => {
    e.stopPropagation()
    e.preventDefault()
  }

  return (
    <div className="Upload" css={CSS}>
      <div className="inner">
        <div className="list">
          <h5>Your Files:</h5>

          <ul className="files">{/* file names here. */}</ul>
        </div>

        <div
          className="form"
          onDragEnter={preventBubbling}
          onDragOver={preventBubbling}
          onDrop={(e) => {
            preventBubbling(e)
            setFiles(Array.from(e.dataTransfer.files))
          }}
        >
          <i className="fa fa-cloud-upload fa-4x"></i>
          <p>Drag and drop files or select files below.</p>

          <input
            ref={inputRef}
            type="file"
            multiple
            style={{ display: 'none' }}
            onChange={(e) => setFiles(Array.from(e.target.files))}
          />
          <button onClick={handleClick}>Choose Files</button>
        </div>
      </div>
    </div>
  )
}