react-file-preview

The url previewer is built using native html elements for previewing url of files of the following type

• csv files
• text files
• pdf files
• html files
• image files (supported by the browser)
• audio files (supported by the browser)
• video files (supported by the browser)
• docx, xlsx, pptx files

Also, for unsupported files or when an error occurs, it falls back to using an icon.

Installation

1npm i @afzalimdad9/react-file-preview

Usage

Currently, the file supports only urls, in the future hopefully it can be extended to files also.

Basic Usage

1import React, { useState } from 'react'
2import FileViewer from '@afzalimdad9/react-file-preview'
3
4export default function Demo() {
5  const [file, setFile] = useState<string>('')
6  const [mimeType, setMimeType] = useState<string>()
7  const [name, setName] = useState<string>('image.jpg')
8
9  return (
10    <>
11      <div>
12        <label>File url</label>
13        <br />
14        <input type='text' onChange={(e) => setFile(e.target.value)} />
15      </div>
16      <div>
17        <label>File mimeType</label>
18        <br />
19        <input type='text' onChange={(e) => setMimeType(e.target.value)} value={mimeType} />
20      </div>
21      <div>
22        <label>File name</label>
23        <br />
24        <input type='text' onChange={(e) => setName(e.target.value)} value={name} />
25      </div>
26      <div
27        style={{
28          height: '500px',
29          width: '500px',
30        }}
31      >
32        <FileViewer
33          loader={undefined}
34          mimeType={mimeType}
35          src={file}
36          onError={(e) => {
37            console.log(e)
38          }}
39          fileName={name}
40        />
41      </div>
42    </>
43  )
44}
45

FileViewer Props

Prop name	Type	Description
src	string	The url of the file to be previewed
mimetype	string (optional)	Used to specify the mimetype of the file and determine how to preview the url, alternatively filename can be used
filename	string (optional)	The file extension is used to specify the mimetype of the file and determine how to preview the url, alternatively mimetype can be used
loader	ReactNode (optional)	A loader to replace the default loader used by the project
onError	(e: any) => void (optional)	A callback that can be used to detect if an error has occurred in the loading of the files
autoPlay	boolean	To autoplay a video or an audio
containerErrorStyle	React.CSSProperties	The style of the container when an error occurs