react-file-previewer

A browser/device-agnostic file previewer for PDF and image file types built on top of React-PDF.

Installation

npm i react-file-previewer

Usage

This component supports URLs and base64 encoded data.

Basic Usage

1import FilePreviewer from 'react-file-previewer';
2
3export const App = () => (
4    <div>
5        <h1>My App</h1>
6        <FilePreviewer file={{
7            url: "https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf"}}
8        />
9    </div>
10);

Base64 Usage

1import FilePreviewer from 'react-file-previewer';
2
3export const App = () => (
4    <div>
5        <h1>My App</h1>
6        <FilePreviewer 
7            file={{
8                data: "<base64 string>",
9                mimeType: 'application/pdf',
10                name: 'sample.pdf' // for download
11            }}
12        />
13    </div>
14);

Using with HTML file input

1import { useState } from 'react';
2import FilePreviewer from 'react-file-previewer';
3
4const PDF1_URL =
5  'https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf';
6
7export const App = () => {
8    const [file, setFile] = useState({ url: PDF1_URL });
9    
10    const onFileChange = event => {
11        const fileReader = new window.FileReader();
12        const file = event.target.files[0];
13        
14        fileReader.onload = fileLoad => {
15            const { result } = fileLoad.target;
16            setFile({ url: result });
17        };
18        
19        fileReader.readAsDataURL(file);
20    };
21
22    return (
23        <div>
24            <h1>My App</h1>
25            <input type="file" onChange={onFileChange} />
26            <FilePreviewer 
27                file={file}
28            />
29        </div>
30    )
31};

Using it as a thumbnail

This will render the first page of the file as a thumbnail. It takes the exact same props as the default export FilePreviewer.

1import {FilePreviewerThumbnail} from 'react-file-previewer';
2
3export const App = () => (
4    <div>
5        <h1>My App</h1>
6        <FilePreviewerThumbnail 
7            file={{
8                data: "<base64 string>",
9                mimeType: 'application/pdf',
10                name: 'sample.pdf' // for download
11            }}
12        />
13        -or-
14        <FilePreviewerThumbnail file={{
15            url: "https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf"}}
16        />
17    </div>
18);

FilePreviewer Props

Prop name	Type	Description
file	object	Refer to file object
onClick	function	Event handler for when viewer is clicked
hideControls	bool	If 'true', viewer won't display the zoom, page up/down, and fit-to-screen controls

FilePreviewerThumbnail Props

Prop name	Type	Description
file	object	Refer to file object
onClick	function	Event handler for when viewer is clicked
hideControls	bool	If 'true', viewer won't display the zoom, page up/down, and fit-to-screen controls
style	object	Any css style overrides

File Object

Prop name	Type	Description
url	string	This can be used by itself with no other prop
data	string	Base64 encoded string of file. If used, mimeType must also be provided
mimeType	string	Type of the file
name	string	Used to specify the filename when download button is clicked