regarding uploading files and images and can read this image or pdf after uploadin and gives the response according to this pdf

[AjayKumarpaswan]

Select Topic Area

Question

Body

i am using nodejs for backend and for frontend i am using the react+vite with tailwind css

[ravig0swami]

If you want to let users upload PDFs or images and then read the content, you can set it up like this:
Frontend (React + Vite + Tailwind): Use a simple upload form, send the file to your backend with FormData.
Backend (Node.js + Express): Use multer to handle uploads. Then process the file with pdf-parse (for PDFs) or tesseract.js (for images).
Send the extracted text/data back as JSON so the frontend can display it.
This way React just handles uploading + displaying, while Node.js does the heavy lifting of reading the files.

[AjayKumarpaswan]

I am using like this way but it will not read the large files it will works only for small size image or pdf i want the functionality like chat gpt if sir you have the code please share with me it's very urgent sir please

…

On Tue, Oct 7, 2025, 7:17 PM Rᴀᴠɪ Gᴏꜱᴡᴀᴍɪ ***@***.***> wrote: If you want to let users upload PDFs or images and then read the content, you can set it up like this: Frontend (React + Vite + Tailwind): Use a simple upload form, send the file to your backend with FormData. Backend (Node.js + Express): Use multer to handle uploads. Then process the file with pdf-parse (for PDFs) or tesseract.js (for images). Send the extracted text/data back as JSON so the frontend can display it. This way React just handles uploading + displaying, while Node.js does the heavy lifting of reading the files. — Reply to this email directly, view it on GitHub <#176009 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BAEXJBFLQTDP7XJRSE4U6A33WO753AVCNFSM6AAAAACIPCE3HSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTINRRGU3DINQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[ravig0swami]

Instead of reading it all at once. Process it in parts (page by page for PDF)

For React Vite Tailwind use this
import{useState } from "react";

export default function FileUpload(){
const [file, setFile] = useState(null);
const [output, setOutput] = useState("");

const handleUpload = async () =>{
if (!file) return;

const formData = new FormData(); formData.append("file", file); const res = await fetch("http://localhost:5000/upload",{method: "POST", body: formData, }); const data = await res.json(); setOutput(data.text); 

};

return (

Upload File

<input
type="file"
onChange={(e) => setFile(e.target.files[0])}
className="mb-4"
/>

Upload

{output}

);
}

And for backend

// server.js
import express from "express";
import multer from "multer";
import cors from "cors";
import fs from "fs";
import{getDocument } from "pdfjs-dist";
import Tesseract from "tesseract.js";

const app = express();
app.use(cors());

const upload = multer({dest: "uploads/" });

// PDF reader (page by page)
async function readPdf(filePath){
const doc = await getDocument(filePath).promise;
let text = "";

for (let i = 1; i <= doc.numPages; i++){
const page = await doc.getPage(i);
const content = await page.getTextContent();
const pageText = content.items.map((item) => item.str).join(" ");
text += \n--- Page ${i} ---\n + pageText;
}

return text;
}

// Image OCR (works in chunks)
async function readImage(filePath){
const result = await Tesseract.recognize(filePath, "eng");
return result.data.text;
}

// Upload route
app.post("/upload", upload.single("file"), async (req, res) =>{
try{
const file = req.file;
let result;

if (file.mimetype === "application/pdf"){result = await readPdf(file.path)} else if (file.mimetype.startsWith("image/")){result = await readImage(file.path)} else{return res.status(400).json({error: "Unsupported file type" })} // Cleanup temp file fs.unlinkSync(file.path); res.json({text: result }); 

} catch (err){
console.error(err);
res.status(500).json({error: "Failed to process file" });
}
});

app.listen(5000, () => console.log("Server running on http://localhost:5000"));

[AjayKumarpaswan]

Sir i want the pdf should be read by open ai api not normal read by node js please sir

…

On Tue, Oct 7, 2025, 7:35 PM Rᴀᴠɪ Gᴏꜱᴡᴀᴍɪ ***@***.***> wrote: Instead of reading it all at once. Process it in parts (page by page for PDF) For React Vite Tailwind use this import{useState } from "react"; export default function FileUpload(){const [file, setFile] = useState(null); const [output, setOutput] = useState(""); const handleUpload = async () =>{if (!file) return; const formData = new FormData(); formData.append("file", file); const res = await fetch("http://localhost:5000/upload",{method: "POST", body: formData, }); const data = await res.json(); setOutput(data.text)}; return ( Upload File <input type="file" onChange={(e) => setFile(e.target.files[0])} className="mb-4" /> Upload{output} )} And for backend // server.js import express from "express"; import multer from "multer"; import cors from "cors"; import fs from "fs"; import{getDocument } from "pdfjs-dist"; import Tesseract from "tesseract.js"; const app = express(); app.use(cors()); const upload = multer({dest: "uploads/" }); // PDF reader (page by page) async function readPdf(filePath){const doc = await getDocument(filePath).promise; let text = ""; for (let i = 1; i <= doc.numPages; i++){const page = await doc.getPage(i); const content = await page.getTextContent(); const pageText = content.items.map((item) => item.str).join(" "); text += \n--- Page ${i} ---\n + pageText} return text} // Image OCR (works in chunks) async function readImage(filePath){const result = await Tesseract.recognize(filePath, "eng"); return result.data.text} // Upload route app.post("/upload", upload.single("file"), async (req, res) =>{try{const file = req.file; let result; if (file.mimetype === "application/pdf"){result = await readPdf(file.path)} else if (file.mimetype.startsWith("image/")){result = await readImage(file.path)} else{return res.status(400).json({error: "Unsupported file type" })} // Cleanup temp file fs.unlinkSync(file.path); res.json({text: result })} catch (err){console.error(err); res.status(500).json({error: "Failed to process file" })} }); app.listen(5000, () => console.log("Server running on http://localhost:5000")); — Reply to this email directly, view it on GitHub <#176009 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BAEXJBA2Z3XK7C5UGP2ZFMT3WPCD5AVCNFSM6AAAAACIPCE3HSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTINRRGU4TEMA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[AjayKumarpaswan]

Basically sir i am making similar like chatgpt I am working on upload file vs image based on this I am performing the operation from api On Tue, Oct 7, 2025, 9:59 PM 008Ajay Kumar Paswan < ***@***.***> wrote:

…

Sir i want the pdf should be read by open ai api not normal read by node js please sir On Tue, Oct 7, 2025, 7:35 PM Rᴀᴠɪ Gᴏꜱᴡᴀᴍɪ ***@***.***> wrote: > Instead of reading it all at once. Process it in parts (page by page for > PDF) > > For React Vite Tailwind use this > import{useState } from "react"; > > export default function FileUpload(){> const [file, setFile] = useState(null); > const [output, setOutput] = useState(""); > > const handleUpload = async () =>{> if (!file) return; > > const formData = new FormData(); > formData.append("file", file); > > const res = await fetch("http://localhost:5000/upload",{> method: "POST", > body: formData, >}); > > const data = await res.json(); > setOutput(data.text); > >}; > > return ( > > Upload File > <input > type="file" > onChange={(e) => setFile(e.target.files[0])} > className="mb-4" > /> > > Upload > >{output} > > > > ); >} > > And for backend > > // server.js > import express from "express"; > import multer from "multer"; > import cors from "cors"; > import fs from "fs"; > import{getDocument } from "pdfjs-dist"; > import Tesseract from "tesseract.js"; > > const app = express(); > app.use(cors()); > > const upload = multer({dest: "uploads/" }); > > // PDF reader (page by page) > async function readPdf(filePath){> const doc = await getDocument(filePath).promise; > let text = ""; > > for (let i = 1; i <= doc.numPages; i++){> const page = await doc.getPage(i); > const content = await page.getTextContent(); > const pageText = content.items.map((item) => item.str).join(" "); > text += \n--- Page ${i} ---\n + pageText; >} > > return text; >} > > // Image OCR (works in chunks) > async function readImage(filePath){> const result = await Tesseract.recognize(filePath, "eng"); > return result.data.text; >} > > // Upload route > app.post("/upload", upload.single("file"), async (req, res) =>{> try{> const file = req.file; > let result; > > if (file.mimetype === "application/pdf"){> result = await readPdf(file.path); >} else if (file.mimetype.startsWith("image/")){> result = await readImage(file.path); >} else{> return res.status(400).json({error: "Unsupported file type" }); >} > > // Cleanup temp file > fs.unlinkSync(file.path); > > res.json({text: result }); > >} catch (err){> console.error(err); > res.status(500).json({error: "Failed to process file" }); >} >}); > > app.listen(5000, () => console.log("Server running on > http://localhost:5000")); > > — > Reply to this email directly, view it on GitHub > <#176009 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/BAEXJBA2Z3XK7C5UGP2ZFMT3WPCD5AVCNFSM6AAAAACIPCE3HSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTINRRGU4TEMA> > . > You are receiving this because you authored the thread.Message ID: > ***@***.*** > com> >

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬