react-preview-file

Efficient way of rendering an image preview from a File

Installation

$ yarn add react-preview-file

Usage

simple

import FilePreview from 'react-preview-file';

render() {
  const file = new File(['someBase64'], 'me.png');
  return (
    <FilePreview file={file}>
      {(preview) => <img src={preview} />}
    </FilePreview>
  )
}

full

import FilePreview from 'react-preview-file';

class App extends React.Component {
  onInputChange = e => {
    const { currentTarget: { files } } = e;

    this.setState({files[0]});
  }

  render() {
    const {file} = this.state;

    return (
      <div>
        <input type="file" onChange={this.onChange} />
        <FilePreview file={file}>
          {(preview) => <img src={preview} />}
        </FilePreview>
      </div>
    )
  }
}

API

• file: File
• children: (preview: string) => ReactNode

Motivation

• Avoid multiple re-renders: FilePreview uses URL.createObjectURL instead of FileReader, the first one happens asynchronously and avoids dealing with state and multiple re-renders 👁
• Automatically revoke: FilePreview takes care for you of revoke the created preview. This makes memory usage as efficient as possible 🔥
• Efficient preview generation: Not only createObjectURL is faster than FileReader.readAsDataURL byt it also produces fixed length strings, instead of massive base64 strings ⚡️