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 ⚡️