Efficient way of rendering an image preview from a File
$ yarn add react-preview-file 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> ) } }- file: File
- children: (preview: string) => ReactNode
- 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 ⚡️