Make it possible to remove file from acceptedFiles state

[claytonfbell]

Do you want to request a feature or report a bug?

• I found a bug
• I want to propose a feature

What is the current behavior?
No way to remove file from the acceptedFiles state array.

If this is a feature request, what is motivation or use case for changing the behavior?
it would be nice to allow user to remove files with a trash button from the acceptedFiles state array. Please forgive me if this functionality exists, I did not find it in examples or StackOverflow and I'm still learning to work with hooks.

[rolandjitsu]

@claytonfbell I think this is out of the scope of dropzone. It's up to you to alter the files in whatever way you need/want.

Furthermore, the dropzone can be used as a headless component or a hook, meaning there is no UI rendered, therefore, we cannot add any delete buttons. You're perhaps referring to the examples, but note that those are not part of the dropzone lib.

If you have further issues, feel free to report it.

[claytonfbell]

I see, thanks for getting back. I missed the response until now.

I didn't mean to propose adding any UI component. But I want to mutate the acceptedFiles state array that is returned from the useDropzone hook. Like if we added a clearFiles function that could also be returned from the hook. The "Clear" UI button on my component's end would call it onClick={clearFiles}.

    // line 743 - added function to useDropdown's return
    clearFiles: () => {
      dispatch({ type: 'setFiles' , acceptedFiles: [], rejectedFiles: []})
    }

Maybe I'm missing an obvious way to change the state of "acceptedFiles" returned from the hook.

Thank you, this is a terrific library.

[rolandjitsu]

@claytonfbell this can be done in the user land, or maybe I'm missing something 😕 It could help if you could provide an example illustrating your use case.

[claytonfbell]

Thank you again!

I've taken the existing Basic example and added a Remove File button next to each file, as well as the addition of a Remove All button.

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

function Basic(props) {
  const {acceptedFiles, getRootProps, getInputProps, inputRef} = useDropzone();

  const removeFile = (file) => () => {
    console.log('removeFile...')
    acceptedFiles.splice(acceptedFiles.indexOf(file), 1)
    console.log(acceptedFiles)
  }

  const removeAll = () => {
    console.log('removeAll...')
    acceptedFiles.length = 0
    acceptedFiles.splice(0, acceptedFiles.length)
    inputRef.current.value = ''
    console.log(acceptedFiles)
  }

  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes <button onClick={removeFile(file)}>Remove File</button>
    </li>
  ));

  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>
      { files.length > 0 && <button onClick={removeAll}>Remove All</button> }
    </section>
  );
}

export default Basic

[claytonfbell]

After working with this more I work around by creating my own useState. Not sure if this is the best way, but maybe this can be helpful to others.

import React, { useState, useCallback } from "react"
import { useDropzone } from "react-dropzone"

function Basic(props) {
  const [myFiles, setMyFiles] = useState([])

  const onDrop = useCallback(acceptedFiles => {
    setMyFiles([...myFiles, ...acceptedFiles])
  }, [myFiles])

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
  })

  const removeFile = file => () => {
    const newFiles = [...myFiles]
    newFiles.splice(newFiles.indexOf(file), 1)
    setMyFiles(newFiles)
  }

  const removeAll = () => {
    setMyFiles([])
  }

  const files = myFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes{" "}
      <button onClick={removeFile(file)}>Remove File</button>
    </li>
  ))

  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>
      {files.length > 0 && <button onClick={removeAll}>Remove All</button>}
    </section>
  )
}

export default Basic

[gundojuprashanth]

Hi
I am using default rejected files from the dependency. I need to remove the rejected file, can you please explain me

dropzone.txt

[cbrwizard]

Imo, this should be a part of package api.

[aimdevlee]

I hope this example will be of some help to you guys (Used DataTransfer API)

[nullheader]

@claytonfbell , thank you.

[aaj]

Is there really no built-in way of doing this?

[rolandjitsu]

@aaj no. But seeing that more ppl want this, I think someone should make a PR as I don't have the time to do it.

[aaj]

@rolandjitsu After writing that comment I figured out a way to do it in my own code, and honestly I've changed my mind about this. acceptedFiles is only available during the onDrop callbacks. It doesn't represent a persistent list of selected files, so it doesn't really make sense to have a way of clearing that list. I essentially did what @claytonfbell did, which is the only logical way to do it (keeping files in your own state).

[rcasari1987]

@claytonfbell , thank you.