├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.js ├── index.css ├── index.js ├── reportWebVitals.js └── setupTests.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Upload & View PDF Files in React Apps 2 | 3 | ## About Project 4 | 5 | A simple react application that uploads and view PDF files in browsers, built with React-PDF-Viewer. If you find this outdated then you can check this updated repo https://github.com/HamzaAnwar1998/View-PDF-Files-in-React-Apps-2022 6 | 7 | ## Live Presentation Video 8 | 9 | https://youtu.be/v-PoG1X8jig 10 | 11 | ## Built With 12 | 13 | * React 14 | * React-PDF-Viewer 15 | 16 | ## Similar Project 17 | 18 | * View PDF Files from Firebase Storage in React: https://github.com/HamzaAnwar1998/View-PDF-Files-from-Firebase-Storage-in-React 19 | 20 | ## Getting Started 21 | 22 | * Clone this repo 23 | 24 | ```bash 25 | git clone https://github.com/HamzaAnwar1998/Upload-View-Pdf-In-Reactjs.git 26 | ``` 27 | 28 | * On the comandline, at the project's root, run ```npm install``` to install app dependencies 29 | 30 | * Next, run ```npm start``` which will run the app in the development mode. 31 | 32 | * Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 33 | 34 | * ALTERNATIVELY 35 | 36 | * Just run ```npm run build``` which will build the project and generate output files into the ```build``` directory. 37 | 38 | * Go to ```build``` directory and manually open ```index.html``` to interact with the app 39 | 40 | 41 | ## Contributing 42 | 43 | Contributions, issues, and feature requests are welcome! 44 | 45 | Feel free to check the [issues page](../../issues) 46 | 47 | 1. Fork the Project 48 | 2. Create your Feature Branch (`git checkout -b feature/newFeature`) 49 | 3. Commit your Changes (`git commit -m 'Add some newFeature'`) 50 | 4. Push to the Branch (`git push -u origin feature/newFeature`) 51 | 5. Open a Pull Request 52 | 53 | ## Authors 54 | 55 | 👤 **Hamza Anwar** 56 | 57 | - GitHub: [@HamzaAnwar1998](https://github.com/HamzaAnwar1998/) 58 | - LinkedIn: [@Hamza Anwar](https://www.linkedin.com/in/hamza-anwar75/) 59 | 60 | ## Show your support 61 | 62 | Give a ⭐️ if you like this project! 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "upload-view-pdf", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@react-pdf-viewer/core": "^2.4.1", 7 | "@react-pdf-viewer/default-layout": "^2.4.1", 8 | "@testing-library/jest-dom": "^5.11.9", 9 | "@testing-library/react": "^11.2.5", 10 | "@testing-library/user-event": "^12.8.3", 11 | "bootstrap": "^4.6.0", 12 | "pdfjs-dist": "^2.6.347", 13 | "react": "^17.0.1", 14 | "react-dom": "^17.0.1", 15 | "react-scripts": "4.0.3", 16 | "web-vitals": "^1.1.1" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HamzaAnwar1998/Upload-View-Pdf-In-Reactjs/5368206efe036ae52fd468a39fd28788026e501b/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HamzaAnwar1998/Upload-View-Pdf-In-Reactjs/5368206efe036ae52fd468a39fd28788026e501b/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HamzaAnwar1998/Upload-View-Pdf-In-Reactjs/5368206efe036ae52fd468a39fd28788026e501b/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | // Import the main component 3 | import { Viewer } from '@react-pdf-viewer/core'; // install this library 4 | // Plugins 5 | import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; // install this library 6 | // Import the styles 7 | import '@react-pdf-viewer/core/lib/styles/index.css'; 8 | import '@react-pdf-viewer/default-layout/lib/styles/index.css'; 9 | // Worker 10 | import { Worker } from '@react-pdf-viewer/core'; // install this library 11 | 12 | export const App = () => { 13 | 14 | // Create new plugin instance 15 | const defaultLayoutPluginInstance = defaultLayoutPlugin(); 16 | 17 | // for onchange event 18 | const [pdfFile, setPdfFile]=useState(null); 19 | const [pdfFileError, setPdfFileError]=useState(''); 20 | 21 | // for submit event 22 | const [viewPdf, setViewPdf]=useState(null); 23 | 24 | // onchange event 25 | const fileType=['application/pdf']; 26 | const handlePdfFileChange=(e)=>{ 27 | let selectedFile=e.target.files[0]; 28 | if(selectedFile){ 29 | if(selectedFile&&fileType.includes(selectedFile.type)){ 30 | let reader = new FileReader(); 31 | reader.readAsDataURL(selectedFile); 32 | reader.onloadend = (e) =>{ 33 | setPdfFile(e.target.result); 34 | setPdfFileError(''); 35 | } 36 | } 37 | else{ 38 | setPdfFile(null); 39 | setPdfFileError('Please select valid pdf file'); 40 | } 41 | } 42 | else{ 43 | console.log('select your file'); 44 | } 45 | } 46 | 47 | // form submit 48 | const handlePdfFileSubmit=(e)=>{ 49 | e.preventDefault(); 50 | if(pdfFile!==null){ 51 | setViewPdf(pdfFile); 52 | } 53 | else{ 54 | setViewPdf(null); 55 | } 56 | } 57 | 58 | return ( 59 |
60 | 61 |

62 | 63 |
64 | 67 | {pdfFileError&&
{pdfFileError}
} 68 |

69 | 72 |
73 |

74 |

View PDF

75 |
76 | {/* show pdf conditionally (if we have one) */} 77 | {viewPdf&&<> 78 | 80 | } 81 | 82 | {/* if we dont have pdf or viewPdf state is null */} 83 | {!viewPdf&&<>No pdf file selected} 84 |
85 | 86 |
87 | ) 88 | } 89 | 90 | export default App 91 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | 5 | } 6 | 7 | .pdf-container{ 8 | width: 100%; 9 | height: 800px; 10 | background-color: #e4e4e4; 11 | overflow-y: auto; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .error-msg{ 18 | width: 100%; 19 | color: red; 20 | font-size: 14px; 21 | font-weight: 600; 22 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import 'bootstrap/dist/css/bootstrap.css'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); 14 | 15 | // If you want to start measuring performance in your app, pass a function 16 | // to log results (for example: reportWebVitals(console.log)) 17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 18 | reportWebVitals(); 19 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------