title: Image preview using Dropzone extending File type
body: <p>Would like to preview an image before uploading using dropzone. I am trying to map the images by calling <code>file.preview</code> but it does not exist on type File. Dropzone extends the file type with a <code>preview?: string</code>. My question is how do I access the extended type? How do I show an image with the URL.createObjectURL I'm using. I am new to TypeScript and cannot wrap my head around the problem. Any help is appreciated.</p>
  
  <ul>
  <li>I have tried creating a custom interface, importing it and assigning it to files: Pic[] to no success. Complains that the properties do not exist on the accepted files. I understand that. Perhaps I have to declare what is what in the function? No idea.</li>
  </ul>
  
  <pre><code>export interface Pic {
    picId: string
    name: string
    preview: string
  }
  </code></pre>
  
  <ul>
  <li><p>I have Object.assigned a preview URL within the onDrop function. It carries over but still cannot access it through files.preview.</p></li>
  <li><p>I tried using a constructor to get the extended type but get completely lost in what I'm trying to achieve.</p></li>
  </ul>
  
  <pre><code>import * as React from "react"
  import styles from "../../styles.scss"
  import Dropzone from "react-dropzone"
  
  class ImageUpload extends React.Component {
    state = {
      files: []
    }
  
    handleOnDrop = (files: File[]) =&gt; {
      files.map(file =&gt; Object.assign(file, {
        preview: URL.createObjectURL(file)
      }))
      this.setState({ files: [...this.state.files, ...files] })
      console.log(files)
    }
  
    render() {
      const files = this.state.files.map((file: File) =&gt; (
        console.log(file),
        (
          &lt;li key={file.name}&gt;
            {file.preview}
          &lt;/li&gt;
        )
      ))
  
      return (
        &lt;form&gt;
          &lt;div&gt;
            &lt;h2&gt;Upload images&lt;/h2&gt;
          &lt;/div&gt;
          &lt;Dropzone onDrop={this.handleOnDrop} accept="image/*" /&gt;
          &lt;ul&gt;{files}&lt;/ul&gt;
        &lt;/form&gt;
      )
    }
  }
  
  export default ImageUpload
  </code></pre>
  
  <p>Expected results: file.preview URL works and I can use it as a background image.
  Actual results: file.preview does not exist on type File.</p>