Getting react-dropzone to accept all files

Question

I have inherited a code base that is React.JS on the front-end and Node.JS/Express.JS on the back-end on an AWS EC2 instance server. The code I have usese react-dropzone (https://react-dropzone.js.org/) and was made to just take drag&drops of image files. The product owner for the project I'm working on now wants it to accept all files (*.pdf's, *.docx, *.xlsx, etc.).

I'm wondering how to go about getting it to accept all files? I've gone through the react-dropzone docs and I've yet to find any example to show how to get it to accept all file types? Is it as simple as setting the accept="..." from accept="image/*" to accept="*/*"? can the string for accept="..." be an array, like: accept=["image/*","text/*",...], etc.? what is the correct way to get react-dropzone to accept any file type?

Here is the code for my onDrop callback —

    onDrop = (acceptedFiles, rejectedFiles) => {
      let files = acceptedFiles.map(async file => {
        let data = new FormData();
        data.append("file", file);

        let item = await axios
          .post("triage/upload", data, {
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(response => {
            return Object.assign(file, {
              preview: URL.createObjectURL(file),
              filename: response.data.filename
            });
          })
          .catch(err => {
            let rejects = rejectedFiles.map(async file => {
              let data = new FormData();
              await data.append("file", file);

              console.log("There was an error while attempting to add your files:", err);
              console.log("The files that were rejected were:\n", rejects.join('\n'))
            })
          });
        return item;
      });
      Promise.all(files)
      .then(completed => {
        console.log("completed", completed);
        let fileNames = completed.map(function(item) {
          return item["filename"];
        });
        this.setState({ files: completed, fileNames: fileNames });
      })
      .catch(err => {
        console.log('DROPZONE ERROR:', err);
      });
    };

...and here is the code for <DropZone> itself in the same file —

              <Dropzone accept="image/*" onDrop={this.onDrop}>
                {({ getRootProps, getInputProps, isDragActive }) => {
                  return (
                    <div
                      {...getRootProps()}
                      className={classNames("dropzone", {
                        "dropzone--isActive": isDragActive
                      })}
                    >
                      <input {...getInputProps()} />
                      {isDragActive ? (
                        <div>
                          <div className="centered">
                            <Icon name="cloud upload" size="big" />
                          </div>
                          <div className="centered">Drop Files Here.</div>
                          <div className="centered">
                            <Button className="drop-button">
                              Or Click to Select
                            </Button>
                          </div>
                        </div>
                      ) : (
                        <div>
                          <div className="centered">
                            <Icon name="cloud upload" size="big" />
                          </div>
                          <div className="centered">
                            Drag and Drop Supporting Files here to
                            Upload.
                          </div>
                          <div className="centered">
                            <Button className="drop-button">
                              Or Click to Select
                            </Button>
                          </div>
                        </div>
                      )}
                    </div>
                  );
                }}
              </Dropzone>

Have you tried anything so far? What happens if you simply omit the attribute? — , May 06 '19 at 23:58
@ChrisG - it returns an empty array (`completed ˃ []`), as in nothing got uploaded. — faddah, May 07 '19 at 00:59

score 3 · Accepted Answer · answered May 07 '19 at 00:05

3

You can just use like with regular input, so you can do multiple file types like: image/*,.pdf.

Reference here.

answered May 07 '19 at 00:05

Colin Ricardo

16,488
11
47
80

I'm sorry, @codecubed.io, but I don't quite know what you mean by "just use like with regular `input`," do you mean instead of `accept="image/*`, i could have `input="image/*, *.pdf, *.doc*..."` etc.? – faddah May 07 '19 at 00:57
It doesn't work for all platforms, as they say in their [documentation](https://react-dropzone.js.org/#!/Accepting%20specific%20file%20types). You can use `"video/*, image/png"`, but `".pdf, image/*"` won't let PDF documents to be accepted. Instead for pdf you need `"application/pdf"` – Giorgi Gvimradze Sep 27 '21 at 11:30
Reffer to the [solution](https://github.com/felixrieseberg/React-Dropzone-Component/issues/164#issuecomment-385700567) – Giorgi Gvimradze Sep 27 '21 at 11:36

score 1 · Answer 2 · answered Jun 25 '19 at 20:46

I had this exact same issue.

react-dropzone uses attr-accept to handle accepting files. Let's look at the source code for the latter.

* @param file {File} https://developer.mozilla.org/en-US/docs/Web/API/File
 * @param acceptedFiles {string}
 * @returns {boolean}

...

export default function(file, acceptedFiles) {
  if (file && acceptedFiles) {
    ...
  }
  return true
}

To get a return value of true, simply input a falsy string value, i.e. ''

score 1 · Answer 3 · answered May 13 '20 at 07:34

1

Just remove accept prop from <Dropzone /> and it will allow any file type.

answered May 13 '20 at 07:34

Freddy

2,216
3
31
34

score 0 · Answer 4 · answered Sep 23 '20 at 15:23

0

If you use useDropZone, then it will be like this

const {inputProps,...rest }=useDropZone({
onDrop,//onDrop function
acceptFiles:'image/png' //<--- here you provide input related info
})

answered Sep 23 '20 at 15:23

Akshay Vijay Jain

13,461
8
60
73

It doesn't work for all platforms, as they say in their [documentation](https://react-dropzone.js.org/#!/Accepting%20specific%20file%20types). You can use `"video/*, image/png"`, but `".pdf, image/*"` won't let PDF documents to be accepted. – Giorgi Gvimradze Sep 27 '21 at 11:29

Getting react-dropzone to accept *all* files

4 Answers4

Getting react-dropzone to accept all files