React.js react-file-viewer Example to Build File Viewer to Embed Images,Video & Audio Files in Browser Using Javascript

Welcome folks today in this blog post we will be using the react-file-viewer library to build file viewer inside the browser to embed images,audio and video files in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js app using the below command as shown below

npx create-react-app sampleapp

cd sampleapp

And after that you need to install the below library using the below command as shown below

npm i react-file-viewer

And after that you will see the below directory structure of the react.js app as shown below

Embeding Images Using File Viewer

Now we can modify the App.js file and copy paste the following code

App.js

import React from "react";
import FileViewer from "react-file-viewer";

export default function App() {

  const file = "https://images.unsplash.com/photo-1676717892535-4417cc55899c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxN3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60";
  const type = "jpg";

  return (
    <div>
      <h1>Demo: React File Viewer</h1>
      <hr />
      <FileViewer
        fileType={type}
        filePath={file}
      />
    </div>
  );
}

import React from "react";

import FileViewer from "react-file-viewer";

export default function App() {

const file = "https://images.unsplash.com/photo-1676717892535-4417cc55899c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxN3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60";

const type = "jpg";

return (

<div>

<h1>Demo: React File Viewer</h1>

<hr />

<FileViewer

fileType={type}

filePath={file}

</div>

);

}

As you can see we are importing the react-file-viewer library at the top and then we are providing the url of the image and then we are providing the extension of the image. And then we are embeding the FileViewer widget and then we are passing different attributes such as fileType and filePath to provide the path of the file.

Embed Local Images

Now we can even provide the local images path which is present inside the public folder as shown below

Now we will be showing the images present inside the public folder as shown above

App.js

import React from "react";
import FileViewer from "react-file-viewer";

export default function App() {

  const file = "logo192.png";
  const type = "png";

  return (
    <div>
      <h1>Demo: React File Viewer</h1>
      <hr />
      <FileViewer
      
        fileType={type}
        filePath={file}
      />
    </div>
  );
}

import React from "react";

import FileViewer from "react-file-viewer";

export default function App() {

const file = "logo192.png";

const type = "png";

return (

<div>

<h1>Demo: React File Viewer</h1>

<hr />

<FileViewer

fileType={type}

filePath={file}

</div>

);

}

Embeding PDF Files

App.js

import React from "react";
import FileViewer from "react-file-viewer";

export default function App() {

  const file = "file.pdf";
  const type = "pdf";

  return (
    <div>
      <h1>Demo: React File Viewer</h1>
      <hr />
      <FileViewer
        fileType={type}
        filePath={file}
      />
    </div>
  );
}

import React from "react";

import FileViewer from "react-file-viewer";

export default function App() {

const file = "file.pdf";

const type = "pdf";

return (

<div>

<h1>Demo: React File Viewer</h1>

<hr />

<FileViewer

fileType={type}

filePath={file}

</div>

);

}

Simple File Viewer Using Input Element

Now guys we will be having a simple file viewer example where we will allow the users to select the file using the input form element as shown below

App.js

import React, { useState } from "react";
import FileViewer from "react-file-viewer";

export default function App() {

  const [file,setFile] = useState(null)
  const [ext,setExt] = useState(null)

  const handleChange = (event) => {
    const selectedFile = event.target.files[0]
    const filename = event.target.files[0].name
    setExt(filename.split('.').pop())
    console.log(selectedFile)
    setFile(selectedFile)
  }
  return (
    <div>
      <h1>Demo: React File Viewer</h1>
      <hr />
      <input type="file" onChange={handleChange}/>
      {file && (
        <FileViewer
        fileType={ext}
        filePath={URL.createObjectURL(file)}
        />
      )}
    </div>
  );
}

import React, { useState } from "react";

import FileViewer from "react-file-viewer";

export default function App() {

const [file,setFile] = useState(null)

const [ext,setExt] = useState(null)

const handleChange = (event) => {

const selectedFile = event.target.files[0]

const filename = event.target.files[0].name

setExt(filename.split('.').pop())

console.log(selectedFile)

setFile(selectedFile)

}

return (

<div>

<h1>Demo: React File Viewer</h1>

<hr />

{file && (

<FileViewer

fileType={ext}

filePath={URL.createObjectURL(file)}

)}

</div>

);

}

As you can see we are importing the react-file-viewer library at the top and then we have the input element where we allow the user to select the file and then based upon the file we are showing the live preview of the selected file.