title: Getting react-dropzone to accept *all* files
body: <p>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 (<a href="https://react-dropzone.js.org/" rel="nofollow noreferrer">https://react-dropzone.js.org/</a>) and was made to just take drag&amp;drops of image files. The product owner for the project I'm working on now wants it to accept <em>all</em> files (*.pdf's, *.docx, *.xlsx, etc.).</p>
  
  <p>I'm wondering how to go about getting it to accept <em>all</em> 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 <em>all</em> file types? Is it as simple as setting the <code>accept="..."</code> from <code>accept="image/*"</code> to <code>accept="*/*"</code>? can the string for <code>accept="..."</code> be an array, like: <code>accept=["image/*","text/*",...]</code>, etc.? what is the correct way to get react-dropzone to accept any file type? </p>
  
  <p>Here is the code for my <code>onDrop</code> callback —</p>
  
  <pre><code>    onDrop = (acceptedFiles, rejectedFiles) =&gt; {
        let files = acceptedFiles.map(async file =&gt; {
          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 =&gt; {
              return Object.assign(file, {
                preview: URL.createObjectURL(file),
                filename: response.data.filename
              });
            })
            .catch(err =&gt; {
              let rejects = rejectedFiles.map(async file =&gt; {
                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 =&gt; {
          console.log("completed", completed);
          let fileNames = completed.map(function(item) {
            return item["filename"];
          });
          this.setState({ files: completed, fileNames: fileNames });
        })
        .catch(err =&gt; {
          console.log('DROPZONE ERROR:', err);
        });
      };
  </code></pre>
  
  <p>...and here is the code for <code>&lt;DropZone&gt;</code> itself in the same file —</p>
  
  <pre><code>              &lt;Dropzone accept="image/*" onDrop={this.onDrop}&gt;
                  {({ getRootProps, getInputProps, isDragActive }) =&gt; {
                    return (
                      &lt;div
                        {...getRootProps()}
                        className={classNames("dropzone", {
                          "dropzone--isActive": isDragActive
                        })}
                      &gt;
                        &lt;input {...getInputProps()} /&gt;
                        {isDragActive ? (
                          &lt;div&gt;
                            &lt;div className="centered"&gt;
                              &lt;Icon name="cloud upload" size="big" /&gt;
                            &lt;/div&gt;
                            &lt;div className="centered"&gt;Drop Files Here.&lt;/div&gt;
                            &lt;div className="centered"&gt;
                              &lt;Button className="drop-button"&gt;
                                Or Click to Select
                              &lt;/Button&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        ) : (
                          &lt;div&gt;
                            &lt;div className="centered"&gt;
                              &lt;Icon name="cloud upload" size="big" /&gt;
                            &lt;/div&gt;
                            &lt;div className="centered"&gt;
                              Drag and Drop Supporting Files here to
                              Upload.
                            &lt;/div&gt;
                            &lt;div className="centered"&gt;
                              &lt;Button className="drop-button"&gt;
                                Or Click to Select
                              &lt;/Button&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        )}
                      &lt;/div&gt;
                    );
                  }}
                &lt;/Dropzone&gt;
  </code></pre>