0.8.2 • Published 3 years ago

@dankom/react-file-previewer v0.8.2

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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 nameTypeDescription
fileobjectRefer to file object
onClickfunctionEvent handler for when viewer is clicked
hideControlsboolIf 'true', viewer won't display the zoom, page up/down, and fit-to-screen controls

FilePreviewerThumbnail Props

Prop nameTypeDescription
fileobjectRefer to file object
onClickfunctionEvent handler for when viewer is clicked
hideControlsboolIf 'true', viewer won't display the zoom, page up/down, and fit-to-screen controls
styleobjectAny css style overrides

File Object

Prop nameTypeDescription
urlstringThis can be used by itself with no other prop
datastringBase64 encoded string of file. If used, mimeType must also be provided
mimeTypestringType of the file
namestringUsed to specify the filename when download button is clicked