api/upload.js
import formidable from 'formidable';
export const config = {
api: {
bodyParser: false,
},
};
export default async (req, res) => {
const form = new formidable.IncomingForm();
form.uploadDir = "./";
form.keepExtensions = true;
form.parse(req, (err, fields, files) => {
console.log(err, fields, files);
res.send(err || "DONE")
});
};
api/get.js
export default async (_, res) => {
const fs = require('fs');
fs.readdir("./", (err, files) => {
console.log(err)
res.send(err || files)
});
};
Everything is working fine at localhost but it's not working when i deploy it on vercel.
Function log from vercel dashboard
[POST] /api/upload
2021-02-21T12:47:11.662Z f7bb8a02-2244-4d27-8a55-9e00a43b307b ERROR Uncaught Exception {"errorType":"Error","errorMessage":"EROFS: read-only file system, open 'upload_2dd906bdebc97a1d63a371c9207b84be.png'","code":"EROFS","errno":-30,"syscall":"open","path":"upload_2dd906bdebc97a1d63a371c9207b84be.png","stack":["Error: EROFS: read-only file system, open 'upload_2dd906bdebc97a1d63a371c9207b84be.png'"]}
Unknown application error occurred
You need a server with file system access
if it works on localhost, it's because the application mode on localhost is dev, and if in vercel the application mode is production so it only relies on the .next folder.
if you really want to give it a try, try putting the upload file in the .next/static directory, but it still won't work, with the caveat that the files in vercel are read-only.
path.resolve('.next','static');
i have the same problem, and it seems that i can't really add files in vercel (put upload files to vercel server).
the only way is to create another server to place the uploaded files. or deploy your application to another server that supports this.
or you can also use the recommendations from vercel, please check at https://vercel.com/docs/solutions/file-storage