Getting error when uploading file with Next 13's new route handler

[matheins]

Summary

Im trying to create a POST endpoint wich extracts files from a form and uploads it f.e. to S3:

• It seems to work ok with small files <500kb
• In local develop environment its working fine, also with bigger files

Error message:

TypeError: Error: Unexpected end of form
    at Multipart.<anonymous> (node:internal/deps/undici/undici:6291:50)
    at Multipart.emit (node:events:513:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

I already found an answer regarding the old "Api routes" wich says to set bodyParser=false: https://stackoverflow.com/a/73991222/10739610
I cannot find to set sth similar in he new route handlers and just tried to use the same const config... here... without success.

Implementation:

// ./src/app/files/route.ts
export async function POST(request: NextRequest) {
  try {
    // get files from request body
    const data = await request.formData()
    const files = data.getAll('files') as File[] | undefined
    const folderId = data.get('folderId') as string | undefined

    // check if file exists
    if (!files?.length) {
      return BadRequest('minimum 1 file is required')
    }

    const uploadedFiles = await Promise.all(files.map(async (file) => {
      return await uploadFileToS3(file, user.id, folderId)
    }))

    return NextResponse.json(uploadedFiles)
  } catch (e) {
    console.error(e)
  }
}

Additional information

No response

Example

No response

[matheins]

push

[alsherif-khalaf]

did you find any solution ?

[matheins]

Unfortunately not

[alsherif-khalaf]

the solution :

route.ts :

// working fine

import { NextResponse } from 'next/server';
import { Directus } from '@directus/sdk';
import { Blob } from 'node:buffer';
import FormData from 'form-data';

export async function POST(request: Request) {
  // Get Directus configuration
  const token: string = process.env.DIRECTUS_JOB_TOKEN!;
  const url: string = process.env.DIRECTUS_URL!;

  const directus = new Directus<any>(url);
  await directus.auth.static(token).then(res => {
    console.log("res",res)
  });

  // Get formData from request
  const formData = await request.formData();

  // Get file from formData
  const file = formData.get('file');

  if (file instanceof Blob) {
    // Convert file to stream
    const stream = file.stream();

    // Convert stream to buffer
    const chunks = [];
    for await (const chunk of stream) {
      chunks.push(chunk);
    }
    const buffer = Buffer.concat(chunks);

    // Make a new FormData
    const directusFormData = new FormData();
    directusFormData.append('folder', '887b5198-6b28-4289-8117-87deb4df5e71');
    directusFormData.append("file", buffer, file.name);

    try {
      // const response = await directus.files.createOne(directusFormData);
      const response = await directus.files.createOne(directusFormData).then(async response =>{ return response} );
      console.log("response", response);
      return NextResponse.json({ "message": "Hello, Next.js!" });
    } catch (error) {
      console.log(error);
      return NextResponse.json({ "message": "Error" });
    }
  }
}

[emroze]

You saved my life dude :3

[Mahmaddz]

How i can read other form fields? like my form also contains form fields data

[alsherif-khalaf]

  const formData = await request.formData();

the formData is loaded in the request , through forms inputs names ,

 <label className="label mt-4 block w-full">
                            <span className="label-text me-4 block mb-4">الإسم</span>
                            <input type="text" name='name' placeholder="الإسم" className="form-input border border-slate-400 p-2 rounded-lg w-full " />
                        </label>

the input name will be in the formdata ,

  const name = formData.get('name');

[emroze]

I didn't understand your question. Could you please elaborate?

…

On Sat, Jun 3, 2023, 4:54 AM Muhammad Ahmad ***@***.***> wrote: can you please share how you done this with s3 — Reply to this email directly, view it on GitHub <#46891 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AL7PSPTIMD3WJQ7EHNLPOHLXJJVKRANCNFSM6AAAAAAV2EKYAA> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[Mahmaddz]

I am also sending form data (text fields) to store in DB additionally with files. after calling formData() I got string representation instead of objects. when o console it displays [Object, Object]

[emroze]

Check @alsherif-khalaf 's solution. His solution is working without issues.