Next.js Discord

Discord Forum

Parsing pdfs uploaded using Mantine UI

Answered
Blanc de Hotot posted this in #help-forum
Open in Discord
Blanc de HototOP
I just want the user to be able to upload a pdf and i want it to be parsed into just normal text so i can grab stuff from it.
I dont know what to do I couldn't find anything online that would work.
I tried "pdf-parser" but there were some errors because it was looking for a test file.

im trying to do this without a backend (or something like that) because im hosting on vercel

ive uploaded an image of my file structure

my api/parseTranscript/route.ts is from copilot and i have no idea what i means and it doesnt work anyway:
import { NextResponse } from "next/server";
const pdfParse = require("pdf-parse");

export const POST = async (request: Request) => {
  try {
    console.log("Received POST request to /api/parseTranscript");

    const formData = await request.formData();
    const file = formData.get("file");
    console.log("Form data parsed. File:", file);

    if (!file || !(file instanceof Blob)) {
      console.error("Invalid file uploaded");
      return NextResponse.json({ error: "Invalid file" }, { status: 400 });
    }

    const arrayBuffer = await file.arrayBuffer();
    console.log("ArrayBuffer byteLength:", arrayBuffer.byteLength);

    const buffer = Buffer.from(arrayBuffer);
    console.log("Buffer length:", buffer.length);

    const pdfData = await pdfParse(buffer);
    const text = pdfData.text;
    console.log("Extracted text (preview):", text.slice(0, 500));

    return NextResponse.json({ text });
  } catch (error) {
    console.error("Parse error:", error);
    return NextResponse.json({ error: "Failed to parse PDF" }, { status: 500 });
  }
};
Answered by Blanc de Hotot
nevermind i used pdf2parse and it worked a lot better
View full answer

2 Replies

Blanc de HototOP
my page.tsx for uploading the file:
"use client";

import { Box, Group, Text, Button, FileButton } from '@mantine/core';
import { useEffect, useState } from 'react';

export default function PlanPage() {
  const [file, setFile] = useState<File | null>(null);
  const [parsedText, setParsedText] = useState("");

  useEffect(() => {
    if (!file) return;

    const uploadFile = async () => {
      const formData = new FormData();
      formData.append("file", file);

      try {
        const res = await fetch("/api/parseTranscript", {
          method: "POST",
          body: formData,
        });

        const data = await res.json();
        if (data.text) {
          setParsedText(data.text);
        } else {
          setParsedText("Failed to parse text.");
        }
      } catch (error) {
        setParsedText("Error uploading file.");
        console.error(error);
      }
    };

    uploadFile();
  }, [file]);

  return (
    <>
      <Group justify="center">
        <FileButton onChange={setFile} accept="/pdf">
          {(props) => <Button {...props}>Upload File</Button>}
        </FileButton>
      </Group>

      {file && (
        <>
          <Text size="sm" ta="center" mt="sm">
            Picked file: {file.name}
          </Text>
          {parsedText && (
            <Text size="sm" ta="center" mt="sm" style={{ whiteSpace: 'pre-wrap' }}>
              {parsedText}
            </Text>
          )}
        </>
      )}
    </>
  );
}
Blanc de HototOP
nevermind i used pdf2parse and it worked a lot better
Answer