React.js File Viewer Example to Display Multiple Image,PDF,PPTX,DOCX & HTML Files From URL Using react-doc-viewer Library in Javascript

Welcome folks today in this blog post we will be building a file viewer in react.js using react-doc-viewer library 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 project using the below command as shown below

npx create-react-app fileviewer

cd fileviewer

Now we need to install the dependencies for your react.js app as shown below

npm i react-doc-viewer

As you can see we are install the above library using the below command which will allows us to embed various files which include ppt,pdf,image from url

Directory Structure of React.js Project

Now we will see the directory structure of the react.js project as shown below

As you can see now we will be writing the source code inside the App.js file of your react.js project as shown below

App.js

import "./styles.css";

export default function App() {

  return (
    <div className="App">
      <h1>Sample react-doc-viewer</h1>
    </div>
  );
}

import "./styles.css";

export default function App() {

return (

<h1>Sample react-doc-viewer</h1>

</div>

);

}

As you can see we are initializing the sample react.js app. This is the functional react.js component where we are displaying the heading inside the browser.

Now we need to import the react-doc-viewer library at the very top of the react.js project as shown below

import DocViewer, { DocViewerRenderers } from "react-doc-viewer";

1	import DocViewer, { DocViewerRenderers } from "react-doc-viewer";

As you can see we are importing the DocViewer and DocViewerRenderers from the react-doc-viewer base library of the react.js project. These methods are useful in embeding the different files from the url.

Now we will be declaring the different files from the url. For this we are declaring an array where we storing the paths or urls of the images and files from the url as shown below

const docs = [
    { uri: require("../public/file-sample_500kB.doc") },
    { uri: require("../public/c4611_sample_explain.pdf") },
    { uri: require("../public/sample.numbers") }
  ];

const docs = [

{ uri: require("../public/file-sample_500kB.doc") },

{ uri: require("../public/c4611_sample_explain.pdf") },

{ uri: require("../public/sample.numbers") }

];

As you can see we are fetching the files stored in the public folder. For this you need to copy paste all the files inside the public folder as shown below

Displaying the `Files` using `docviewer`

Now we will be displaying the files and images from the url using the DocViewer component inside the react.js app. For this we need to add the below source code inside the App.js file

<DocViewer
        pluginRenderers={DocViewerRenderers}
        documents={docs}
        config={{
          header: {
            disableHeader: false,
            disableFileName: false,
            retainURLParams: false
          }
        }}
        style={{ height: 500 }}
      />

<DocViewer

pluginRenderers={DocViewerRenderers}

documents={docs}

config={{

header: {

disableHeader: false,

disableFileName: false,

retainURLParams: false

}

}}

style={{ height: 500 }}

Now if you run the react.js app by running the below command as shown below you can see the below result

npm start

Full Source Code

Wrapping the blog post this is the full source code of the App.js file as shown below