import React, { useState } from 'react';
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import './Dashboard.scss';
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf.worker.mjs';
function Dashboard() {
const [pdfText, setPdfText] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const handleFileChange = async (event) => {
const file = event.target.files[0];
if (!file) return;
setIsLoading(true);
setError(null);
setPdfText([]); // Clear any previous content
try {
const arrayBuffer = await file.arrayBuffer();
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
const numPages = pdf.numPages;
const textArray = [];
for (let i = 1; i <= numPages; i++) {
const page = await pdf.getPage(i);
const textContent = await page.getTextContent();
const pageText = textContent.items.map(item => item.str).join(' ');
textArray.push(pageText);
}
if (textArray.length === 0) {
setError('No text found in PDF.');
} else {
setPdfText(textArray);
}
} catch (err) {
console.error(err);
setError('Failed to read PDF. Please try again.');
} finally {
setIsLoading(false);
}
};
return (
<div className="app">
<h1>PDF Text Viewer</h1>
<div className="file-input">
<input
type="file"
accept=".pdf"
onChange={handleFileChange}
disabled={isLoading}
/>
</div>
{isLoading && <p className="loading">Extracting text from PDF...</p>}
{error && <p className="error">{error}</p>}
<div className="pdf-content">
{pdfText.length > 0 ? (
pdfText.map((pageText, index) => (
<div key={index} className="pdf-page">
<h2>Page {index + 1}</h2>
<div className="pdf-text">
<p>{pageText}</p>
</div>
</div>
))
) : (
<p className="no-content">No PDF content to display. Please
upload a PDF file.</p>
)}
</div>
</div>
);
}
export default Dashboard;
