Next.js Discord

Discord Forum

SyntaxError: "[object Object]" is not valid JSON at JSON.parse (<anonymous>) at

Answered
Elm sawfly posted this in #help-forum
Open in Discord
Elm sawflyOP
 ⨯ SyntaxError: "[object Object]" is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:4747:19)
    at successSteps (node:internal/deps/undici/undici:4718:27)
    at fullyReadBody (node:internal/deps/undici/undici:1433:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async specConsumeBody (node:internal/deps/undici/undici:4727:7)
    at async POST (webpack-internal:///(rsc)/./app/api/upload/route.ts:27:57)
Answered by Ray
const record = await fetch("http://localhost:3000/api/upload", {
                method: "POST",
                'Content-Type': "application/json",
                body: JSON.stringify({
                    owner_id: userId,
                    fileType: file.type,
                    fileName: file.name,
                    base64img: base64Content
                })
            })
View full answer

27 Replies

Elm sawflyOP
export async function POST(request: Request) {

    const { owner_id, fileType, fileName, base64img } = await request.json();

    try {
        const record = await xata.db.Files.create({
            owner_id,
            fileName,
            fileType,
            base64img
        });
        console.log(record)
        return NextResponse.json(record, { status: 201 });
    } catch (error) {
        return NextResponse.json(error, {
            status: 400
        })
    }
}
@Ray can you show the code where you fetching the endpoint?
Elm sawflyOP
const { userId } = useAuth();

    const onDrop = (acceptedFiles: File[]) => {
        acceptedFiles.forEach(file => {
            const reader = new FileReader();
            reader.onabort = () => console.log("file reading was aborted");
            reader.onerror = () => console.log("File reading failed");

            reader.onloadend = async () => {
                await uploadPost(file);
            };
            reader.readAsArrayBuffer(file);
        })
    };

    const uploadPost = async (file: File) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = async () => {
            const base64Content = reader.result as string;
            const record = await fetch("http://localhost:3000/api/upload", {
                method: "POST",
                'Content-Type': "application/json",
                body: {
                    // @ts-ignore
                    owner_id: userId,
                    fileType: file.type,
                    fileName: file.name,
                    base64img: base64Content
                }
            })
        }
    }
Ray
const record = await fetch("http://localhost:3000/api/upload", {
                method: "POST",
                'Content-Type': "application/json",
                body: JSON.stringify({
                    owner_id: userId,
                    fileType: file.type,
                    fileName: file.name,
                    base64img: base64Content
                })
            })
Answer
Elm sawflyOP
Ohh
@Elm sawfly Ohh
Ray
does it work?
@Ray does it work?
Elm sawflyOP
@Ray `console.log(error)` here
Elm sawflyOP
 status: 400,
  errors: [
    {
      message: 'invalid record: column [base64img]: length needs to be <= 2048 chars',
      status: 400
    }
  ],
  requestId: '79492059-0f82-9af3-9c7e-6011e27b4707',
  cause: undefined
}
ig this is a DB error
not next
right
?
Ray
yea
Elm sawflyOP
is there any way to make ur base64 shorter
?
Ray
how about setting your column bigger?
Elm sawflyOP
that's the max ig
but will have a look
thx for the help
Ray
is that mysql?
you could use text
Elm sawflyOP
PostgreSQL
@Ray you could use text
Elm sawflyOP
ohh ya
Ray
use text for it
Elm sawflyOP
Ok