Upload 8

index.jsx

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

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

  const handleFiles = (fileList, mode = 'w') => {
    if (mode === 'a') {
      setFiles((prevFiles) => [...prevFiles, ...Array.from(fileList)])
    } else if (mode === 'w') {
      setFiles(Array.from(fileList))
    }
  }

  const removeFile = (name) => {
    const newFiles = files.filter((file) => file.name !== name)
    setFiles(newFiles)
  }

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

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

          {files && (
            <ul className="files">
              {files.map((file, i) => (
                <li key={file.name} onClick={() => removeFile(file.name)}>
                  {i + 1}. {file.name}
                  <span>
                    <i className="fa fa-times" />
                  </span>
                </li>
              ))}
            </ul>
          )}
        </div>

        <div
          className="form"
          onDragEnter={preventBubbling}
          onDragOver={preventBubbling}
          onDrop={(e) => {
            preventBubbling(e)
            handleFiles(e.dataTransfer.files, 'a')
          }}
        >
          <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) => handleFiles(e.target.files, 'a')}
          />
          <button onClick={handleClick}>Choose Files</button>
        </div>
      </div>
    </div>
  )
}