title: How to preview pdf using react dropzone
body: <p>Im having a hard time figuring out how to preview PDFs that I'm uploading using <code>react-dropzone</code>. PNG and JPG are working perfectly but I would also like to be able to show the user either the pdf itself or an image of the pdf. </p>
  
  <p>Here's my code:</p>
  
  <pre><code>  handleImageDrop = (files) =&gt; {
  
      const currentFile = files[0]
      const reader = new FileReader()
      reader.addEventListener("load", () =&gt; {
          this.setState({
            imgSrc: reader.result
          })
      }, false)
  
      reader.readAsDataURL(currentFile)
  
    }
  
   render() {
  
      const { imgSrc } = this.state;
  
          &lt;div&gt;
            &lt;Dropzone
              onDrop={this.handleImageDrop}
              multiple={false}&gt;
                {({getRootProps, getInputProps}) =&gt; {
                  return (
                    &lt;div
                      {...getRootProps()}
                    &gt;
                      &lt;input {...getInputProps()} /&gt;
                      {
                      &lt;p&gt;Try dropping some files here, or click to select files to upload.&lt;/p&gt;
                      }
                    &lt;/div&gt;
                  )
              }}
            &lt;/Dropzone&gt;
            { imgSrc ? &lt;img src={imgSrc}/&gt; : null}
          &lt;/div&gt;
      &lt;/div&gt;
      )
    }
  }
  </code></pre>