react file input, convert File to source url, useful to preview image before uploading

file-input.jsx

import {readFileAsUrl} from './readFileAsUrl'

class Example extends React.Component {
  constructor() {
    this.state = {
      previewUrl: ''
    }
  }
  render() {
    return (
      <div>
        <img src={this.state.previewUrl} />
        <input onChange={this.onChange.bind(this)}
      </div>
    )
  }
  onChange (event) {
    const file = event.target.files[0]
    readFileAsUrl(file).then(url => {
      this.setState({
        previewUrl: url
      })
      event.target.value=null // reset file value, so can select the same file again
    })
  }
}

readFileAsUrl.js

export function readFileAsUrl (file) {
  return new Promise((resolve, reject) => {
    const reader = new window.FileReader()
    reader.onload = e => {
      const src = e.target.result
      resolve(src)
    }
    reader.readAsDataURL(file)
  })
}

readFileAsUrl.ts

// typescript version
export function readFileAsUrl (file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = (event: any) => {
      const src = event.target.result
      resolve(src)
    }
    reader.readAsDataURL(file)
  })
}