Question 312937 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – uploading file to public folder on vercel returns error permission error

When i try to upload file to public folder on vercel I get below error.

⨯ [Error: EROFS: read-only file system, open '/var/task/public/bb17ad93-017f-4fdf-a2db-713d9a390143.webp'] {
  errno: -30,
  code: 'EROFS',
  syscall: 'open',
  path: '/var/task/public/bb17ad93-017f-4fdf-a2db-713d9a390143.webp'
}

Here is my api/upload code.

import { writeFile } from "fs/promises";
import { type NextRequest, NextResponse } from "next/server";
import { join } from "path";
import sharp from 'sharp';
import { v4 as uuidv4 } from 'uuid';

export async function POST(request: NextRequest) {
  const formData = await request.formData();
  const file: File | null = formData.get('file') as unknown as File;

  if (!file) return NextResponse.json({ success: false });

  const bytes = await file.arrayBuffer();
  const buffer = Buffer.from(bytes);
  
  const pngBuffer = await sharp(buffer).toFormat('webp').toBuffer();
  const outputPath = `${uuidv4()}.webp`;

  const path = join(process.cwd(), "public", outputPath);

  await writeFile(path, pngBuffer);
  console.log(`open ${path} to see the uploaded file`);

  return new NextResponse(
    JSON.stringify({ success: true, message: "body.message", image: outputPath }),
    { status: 200, headers: { 'content-type': 'image/png' } }
  );
}

above code works perfectly fine in my dev environment(local computer) but after deploying to vercel it throws that error.

I am using nextjs 13 app router.

Tags:

2

Answers


  1. 0

    You won’t have access to write data in that folder. Only /tmp folder is available Reference. And as its a temporary folder, if you want to persist the file then better to store somewhere, probably in S3. You can check the example here

    Also, you can try Vercel Blob to store data. You can find more here: https://vercel.com/guides/how-to-upload-and-store-files-with-vercel

    Login or Signup to reply.
  2. 0 
    import { promises as fs } from 'fs';
import { join } from 'path';
import sharp from 'sharp';
import { v4 as uuidv4 } from 'uuid';

export async function POST(request) {
  const formData = await request.formData();
  const file = formData.get('file');

  if (!file) {
    return new Response(JSON.stringify({ success: false }), {
      status: 400,
      headers: { 'Content-Type': 'application/json' },
    });
  }

  const fileBuffer = await file.arrayBuffer();
  const imagePath = join('/tmp', `${uuidv4()}.webp`);

  await fs.writeFile(imagePath, Buffer.from(fileBuffer));

  // Clean up temp file
  await fs.unlink(imagePath);

  return new Response(
    JSON.stringify({ success: true, message: 'File uploaded successfully' }),
    { status: 200, headers: { 'Content-Type': 'application/json' } }
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search