Best way to handle file upload with APIEvent

[PradhaID]

hello, i am new to solidjs, any suggestion for handling file uploaded using API Event Route?

i have created upload file using fetch, and sent to API Route (POST)

const body = new FormData()
const file = (e.target as HTMLInputElement)
if (file && file.files) {
    body.append("photo", file.files[0])
    const submit = await fetch("/api/account/photo", {
        method: "POST",
        body
    });
}

i can't get any file even using formidable like this

import { IncomingForm } from "formidable";
export const POST = async (event: APIEvent) => {
    var form = new IncomingForm()
    form.uploadDir = 'uploads'
    form.parse(event.request, function (err: any, fields: any, files: any) {
        if (err) {
            console.log('some error', err)
        } else if (!files.file) {
            console.log('no file received')
        } else {
            var file = files.file
            console.log('saved file to', file.path)
            console.log('original name', file.name)
            console.log('type', file.type)
            console.log('size', file.size)
        }
    })
}

or maybe i missing something?

[framp]

Run into this myself.

I'm doing something like this:

export const POST = async ({ request, params }: APIEvent) => {
  const formData = await request.formData();
  const writeStream = createWriteStream(getPath(params.blob));
  const writableStream = new WritableStream({
    write(chunk) {
      writeStream.write(chunk);
    },
  });
  const file: File = formData.get("web");
  file.stream().pipeTo(writableStream);
  return json({}, 201);
}

But there is room for improvements

[peterhirn]

I couldn't get multipart streams to work using request.formData() (https://github.com/solidjs/solid-start/blob/main/packages/start/node/fetch.js#L104) so I switched to busboy.

Working draft, forwarding uploaded files to MinIO:

import { Readable } from "node:stream";
import { pipeline } from "node:stream/promises";
import { APIEvent } from "solid-start/api";
import busboy from "busboy";

import { minio } from "~/lib/minio";

const BUCKET = "web";

export const POST = async ({ request }: APIEvent) => {
  if (!request.body) return new Response("Request body is missing", { status: 400 });

  const contentType = request.headers.get("content-type");
  if (!contentType) return new Response("Content type is missing", { status: 400 });

  const bb = busboy({ headers: { "content-type": contentType } });

  bb.on("file", async (_name, file, info) => {
    console.log("⏫ Uploading file", info.filename);

    const metaData = { "Content-Type": info.mimeType };
    const result = await minio.putObject(BUCKET, info.filename, file, metaData);

    console.debug("Upload result", result);
  });

  // @ts-ignore
  const stream = Readable.fromWeb(request.body);
  await pipeline(stream, bb);

  return new Response();
};

[AzrizHaziq]

• i'm using this approach but failed to convert FormData -> Buffer -> writeFile...something went wrong in the middle of the process.

  request.formData().then(async (s) => {
      const b = s.get('file') as File
      console.log(b.type, b.name)

      // @ts-ignore: fixme
      const blob = new Blob([b], { type: b.type })

      const buffer = Buffer.from(await blob.arrayBuffer())
      const buff = Buffer.from(new Uint8Array(await blob.arrayBuffer()))

      const savedTo = `public/uploads/${b.name}`
      fs.writeFile(savedTo, buff, () => console.log(`saved ${savedTo}`))
    })

• I also tried using multer, formidable but those lib require IncomingMessage rather than Request in POST handler. IncomingMessage do have .on('file') listener while Request does not expose this. Is there a way for solid-start to expose this or convert Request to IncomingMessage?

Any help much appreciate, been very long trying to make this work.