title: react-dropzone - How to read files through a folder?
body: <p>I am trying to use <a href="https://react-dropzone.netlify.com/" rel="nofollow noreferrer">react-dropzone</a> and I am trying to read all the images of a folder that has been dragged into the zone.</p>
  
  <p>I see they have an <a href="https://react-dropzone.netlify.com/#extending-dropzone" rel="nofollow noreferrer">example</a>.</p>
  
  <pre class="lang-js prettyprint-override"><code>const { getDroppedOrSelectedFiles } = require('html5-file-selector')
  
  class FolderDropzone extends React.Component {
    constructor() {
      super()
      this.state = { files: [] }
    }
  
    onDrop(files) {
      this.setState({
        files
      })
    }
  
    render() {
      return (
        &lt;section&gt;
          &lt;div className="dropzone"&gt;
            &lt;Dropzone
              getDataTransferItems={evt =&gt; getDroppedOrSelectedFiles(evt).then(files =&gt; files)}
              onDrop={this.onDrop.bind(this)}
            &gt;
              &lt;p&gt;Drop a folder with files here.&lt;/p&gt;
            &lt;/Dropzone&gt;
          &lt;/div&gt;
          &lt;aside&gt;
            &lt;h2&gt;Dropped files and folders&lt;/h2&gt;
            &lt;ul&gt;
              {this.state.files.map(f =&gt; (
                &lt;li key={f.name}&gt;
                  {f.fullPath} - {f.size} bytes
                &lt;/li&gt;
              ))}
            &lt;/ul&gt;
          &lt;/aside&gt;
        &lt;/section&gt;
      )
    }
  }
  </code></pre>
  
  <p>but it does not seem to work nor does it say which 3rd party plugin is used.</p>
  
  <p>My local copy gets this error</p>
  
  <pre class="lang-js prettyprint-override"><code>index.js:249 Failed to generate preview for file {fileObject: File(180093), fullPath: "1.jpeg", lastModified: 1538421964806, lastModifiedDate: Mon Oct 01 2018 12:26:04 GMT-0700 (Pacific Daylight Time), name: "1.jpeg", …} TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
      at index.js:246
      at Array.forEach (&lt;anonymous&gt;)
      at index.js:243
  
          fileList.forEach(function (file) {
            if (!disablePreview) {
              try {
                file.preview = window.URL.createObjectURL(file); // eslint-disable-line no-param-reassign
              } catch (err) {
                if (process.env.NODE_ENV !== 'production') {
                  console.error('Failed to generate preview for file', file, err); // eslint-disable-line no-console
                }
              }
            }
  </code></pre>