react-pdf

 // "react-pdf": "^7.1.3"

import React,{useRef, useState} from 'react'

import { AiFillCloseCircle} from "react-icons/ai";

import { Button,Modal,Spinner } from 'react-bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

import { Document, Page,pdfjs } from 'react-pdf';

import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

import 'react-pdf/dist/esm/Page/TextLayer.css';

import ImageWork from './Components/ImageWork';

export default function App() {

 

  pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

  const fileInput=useRef();

  const [files,setFiles]=useState([]);

  const filearray=[...files];

  const [finalFile,setFinalFile] = useState([])

  const [pdfString, setPdfString] = useState('');

  const [numPages, setNumPages] = useState(null);

  const [pageNumber, setPageNumber] = useState(1);

  const [pdf,setPdf] = useState(false)

  const [fileDataURL, setFileDataURL] = useState(null);

  const onFileChange=(e)=>{

console.log(e.target.files);

    console.log(e.target.files.length);

    var arr = [...finalFile]

   for(let i=0;i<e.target.files.length;i++){

    // console.log(e.target.files[i].name);

    arr.push(e.target.files[i])

  // console.log('hello',e.target.files[i].size);

  filearray.push(e.target.files[i].name);

   }

  //  console.log(filearray)

   setFiles(filearray);

   setFinalFile(arr)

  //  console.log(files);

  }

  const handlePdf=(file)=>{

  //   alert(file);

    let file_split=file.name.split('.');

    let filelength=file_split.length;

   let extension=file_split[filelength-1];

   console.log(extension);

    if(extension=="pdf"){

    let base64String;

    let reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onloadend = () => {

    base64String = reader.result;

    setPdfString(base64String.substr(base64String.indexOf(',') + 1));

    setPageNumber(1)

    setPdf(true)

    }

  }

  else{

    // alert("not an pdf file");

    let fileReader

      fileReader = new FileReader();

      fileReader.onload = (e) => {

        const { result } = e.target;

        if (result) {

          setFileDataURL(result)

        }

      }

      fileReader.readAsDataURL(file);

   

  }

 

 

  }

  function onDocumentLoadSuccess({ numPages }) {

    setNumPages(numPages);

  }

  return (

    <div>

      {/* <ImageWork/> */}

      <input type="file" ref={fileInput} onChange={onFileChange} multiple  />

      {files.map((item,index)=><p onClick={() =>handlePdf(finalFile[index])} style={{ textDecoration: 'underline'}}>{item}

     

     

      </p>)}

   

     

      <Modal show={pdf} centered size='lg' >

                <Modal.Body>

                    <div style={{display:'flex',justifyContent:"flex-end"}}>

                <AiFillCloseCircle onClick={() =>setPdf(false)} style={{ height: 30, width: 30,}}></AiFillCloseCircle>

                </div>

              {pdfString?<Document file={`data:application/pdf;base64,${pdfString}`} onLoadSuccess={(numPages)=>setNumPages(numPages)}>

            <Page  width={380}  pageNumber={pageNumber} />

            </Document>:null}

            <p style={{marginRight:20}} onClick={()=>setPageNumber(pageNumber-1)}>PREV</p>

            <p onClick={()=>setPageNumber(pageNumber+1)}>NEXT</p>

                </Modal.Body>

            </Modal>

            <Modal show={fileDataURL} centered size='lg' >

                <Modal.Body>

                <AiFillCloseCircle onClick={() =>setFileDataURL(false)} style={{ height: 30, width: 30,}}></AiFillCloseCircle>

                <p className="img-preview-wrapper">

         

            <img src={fileDataURL} alt="preview" />

         

          </p>

                </Modal.Body>

            </Modal>

            {/* {fileDataURL ?

        <p className="img-preview-wrapper">

          {

            <img src={fileDataURL} alt="preview" />

          }

        </p> : null} */}

    </div>

  )

}