Live Link 🚀 - https://nextjs-pdf-parser1.vercel.app/
ishaangupta-yb.mov
nextjs-pdf-parser is a Next.js template for seamless PDF parsing using pdf2json. It is designed for developers seeking a ready-to-use solution for PDF content extraction in Next.js projects.
- PDF parsing using the
pdf2jsonlibrary - Custom file uploading with drag and drop functionality using
react-dropzoneandshadcn - Easy to extend and customize
Nextjs(App Router) with Tailwind CSS and Shadcn
To get started with the project, follow these steps:
-
Clone the repository:
git clone https://github.com/ishaangupta-YB/nextjs-pdf-parser.git cd nextjs-pdf-parser -
Install dependencies:
npm install # or yarn install -
Run the development server:
npm run dev # or yarn dev -
Open your browser to http://localhost:3000 to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
'use client import React, { useState } from "react"; import { useToast } from "./ui/use-toast"; import FileUpload from "./FileUploader"; const PDFParser = () => { const [uploadedFile, setUploadedFile] = useState<File | null>(null); const { toast } = useToast(); const [parsedText, setParsedText] = useState(""); const [loading, setLoading] = useState(false); const handleFileUpload = async (file: File) => { setUploadedFile(() => { return file; }); toast({ variant: "default", title: "File Uploaded", description: `${file.name} has been uploaded successfully.`, }); setLoading(true); }; return ( <> <FileUpload onFileUpload={handleFileUpload} setParsedText={(text: string) => { setParsedText(text); setLoading(false); }} maxSize={8 * 1024 * 1024} // 8 MB /> {loading && ( <div className="mt-6 flex items-center justify-center"> <div className="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-32 w-32"></div> </div> )} {parsedText && ( <div className="mt-6 w-full max-w-3xl bg-white p-4 rounded shadow"> <h3 className="text-xl font-semibold mb-2">Parsed Text</h3> <p className="bg-gray-100 p-4 rounded whitespace-pre-wrap"> {parsedText} </p> </div> )} </> }; export default PDFParser;or you can simply import HomePage like below
import React from "react"; import HomePage from "./HomePage"; const Home = () => { return <HomePage/> } Contributions are always welcome!
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ by ishaangupta-YB.