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

import FilePreviewer from 'react-file-previewer';

export const App = () => (
    <div>
        <h1>My App</h1>
        <FilePreviewer file={{
            url: "https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf"}}
        />
    </div>
);

Base64 Usage

import FilePreviewer from 'react-file-previewer';

export const App = () => (
    <div>
        <h1>My App</h1>
        <FilePreviewer 
            file={{
                data: "<base64 string>",
                mimeType: 'application/pdf',
                name: 'sample.pdf' // for download
            }}
        />
    </div>
);

Using with HTML file input

import { useState } from 'react';
import FilePreviewer from 'react-file-previewer';

const PDF1_URL =
  'https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf';

export const App = () => {
    const [file, setFile] = useState({ url: PDF1_URL });
    
    const onFileChange = event => {
        const fileReader = new window.FileReader();
        const file = event.target.files[0];
        
        fileReader.onload = fileLoad => {
            const { result } = fileLoad.target;
            setFile({ url: result });
        };
        
        fileReader.readAsDataURL(file);
    };

    return (
        <div>
            <h1>My App</h1>
            <input type="file" onChange={onFileChange} />
            <FilePreviewer 
                file={file}
            />
        </div>
    )
};

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.

import {FilePreviewerThumbnail} from 'react-file-previewer';

export const App = () => (
    <div>
        <h1>My App</h1>
        <FilePreviewerThumbnail 
            file={{
                data: "<base64 string>",
                mimeType: 'application/pdf',
                name: 'sample.pdf' // for download
            }}
        />
        -or-
        <FilePreviewerThumbnail file={{
            url: "https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf"}}
        />
    </div>
);

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 |