vercel nextjs file uploading does not work
Unanswered
Iridescent shark posted this in #help-forum
Iridescent sharkOP
I have an endpoint which uploads files to
cloudinary. On my local host everything works fine, but in production at Vercel when I try to make post request with image via Postman to this endpoint, I get 405 method not allowed response. I read that vercel does not allow to store file, but is it also does not allow to upload files via form? What than should I do? const config = {
maxFileSize: Number(process.env.FILESYSTEM_MAX_FILE_SIZE),
storePath: process.env.FILESYSTEM_STORE_PATH
}
export async function POST(req: NextRequest) {
try {
const formData = await req.formData();
const formDataEntryValues = Array.from(formData.values());
for (const formDataEntryValue of formDataEntryValues) {
if (typeof formDataEntryValue === "object" && "arrayBuffer" in formDataEntryValue) {
const file = formDataEntryValue as unknown as Blob;
if (file.size > config.maxFileSize) {
return BadRequest("Max file size is 1 Mb");
}
const buffer = Buffer.from(await file.arrayBuffer());
const response = await uploadWrapper(buffer);
return NextResponse.json(response, { status: 200 });
}
}
} catch (error: any) {
return NextResponse.json(error, { status: 500 });
}
}
const uploadWrapper = async (buffer: Buffer) => {
return new Promise(async (resolve, reject) => {
const cloud_upload_stream = await cloudinary.v2.uploader.upload_stream({
folder: config.storePath
}, (error, result) => {
if (error) {
reject(error);
} else {
resolve(result);
}
});
streamifier.createReadStream(buffer).pipe(cloud_upload_stream);
})
}4 Replies
@Iridescent shark I have an endpoint which uploads files to `cloudinary`. On my local host everything works fine, but in production at Vercel when I try to make post request with image via Postman to this endpoint, I get 405 method not allowed response. I read that vercel does not allow to store file, but is it also does not allow to upload files via form? What than should I do?
typescript
const config = {
maxFileSize: Number(process.env.FILESYSTEM_MAX_FILE_SIZE),
storePath: process.env.FILESYSTEM_STORE_PATH
}
export async function POST(req: NextRequest) {
try {
const formData = await req.formData();
const formDataEntryValues = Array.from(formData.values());
for (const formDataEntryValue of formDataEntryValues) {
if (typeof formDataEntryValue === "object" && "arrayBuffer" in formDataEntryValue) {
const file = formDataEntryValue as unknown as Blob;
if (file.size > config.maxFileSize) {
return BadRequest("Max file size is 1 Mb");
}
const buffer = Buffer.from(await file.arrayBuffer());
const response = await uploadWrapper(buffer);
return NextResponse.json(response, { status: 200 });
}
}
} catch (error: any) {
return NextResponse.json(error, { status: 500 });
}
}
const uploadWrapper = async (buffer: Buffer) => {
return new Promise(async (resolve, reject) => {
const cloud_upload_stream = await cloudinary.v2.uploader.upload_stream({
folder: config.storePath
}, (error, result) => {
if (error) {
reject(error);
} else {
resolve(result);
}
});
streamifier.createReadStream(buffer).pipe(cloud_upload_stream);
})
}
West African Lion
405 Method Not Allowed error you're encountering when making a POST request to your endpoint on Vercel may not be related to Vercel's file storage policies. Instead, it's likely a configuration issue with your serverless function in Vercel
@West African Lion 405 Method Not Allowed error you're encountering when making a POST request to your endpoint on Vercel may not be related to Vercel's file storage policies. Instead, it's likely a configuration issue with your serverless function in Vercel
Iridescent sharkOP
Thank you for the answer! Where do I need to search for the error in my next.js app or vercel? I didn't change any configurations at Vercel dashboard. Other api endpoints where I post/get json data work fine
I checked logs and probably the reasons I get this error is not with Vercel, but service where I upload files.
(node:9) ExperimentalWarning: buffer.File is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Unhandled Promise Rejection {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Must supply api_key","reason":"Must supply api_key","promise":{},"stack":["Runtime.UnhandledPromiseRejection: Must supply api_key"," at process.<anonymous> (file:///var/runtime/index.mjs:1186:17)"," at process.emit (node:events:525:35)"," at emit (node:internal/process/promises:149:20)"," at processPromiseRejections (node:internal/process/promises:283:27)"," at process.processTicksAndRejections (node:internal/process/task_queues:96:32)"]}
Unknown application error occurred
Runtime.Unknown@Iridescent shark Thank you for the answer! Where do I need to search for the error in my next.js app or vercel? I didn't change any configurations at Vercel dashboard. Other api endpoints where I post/get json data work fine
West African Lion
In your Next.js code, ensure that you are correctly accessing the Cloudinary API key from the environment variables. You should use process.env to access the environment variables.
Example
"Must supply api_key," is coming from the cloudinary library you are using. It indicates that you need to provide an API key when interacting with the Cloudinary service, and it seems that the API key is missing in your Vercel environment.
Example
const cloudinaryApiKey = process.env.CLOUDINARY_API_KEY; "Must supply api_key," is coming from the cloudinary library you are using. It indicates that you need to provide an API key when interacting with the Cloudinary service, and it seems that the API key is missing in your Vercel environment.