Currently, I have implemented react dropzone on a specific page for the purpose of sending a file to an API route called /api/upload. Afterward, the file is supposed to be uploaded to a Strapi upload API using the following code:
import formidable from 'formidable';
var FormData = require('form-data');
const fs = require('fs');
export default async function handler(req, res) {
const {cookies: {jwt}, query: {user_id}} = req
if (req.method === 'POST') {
const form = new formidable.IncomingForm();
const submittedFormData = await new Promise((resolve, reject) => {
form.parse(req, (err, fields, files) => {
if (err) {
reject(err);
} else {
resolve({ fields, files });
}
});
});
const { fields, files } = submittedFormData;
if(Object.keys(fields).length){
const resp = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/users/${user_id}`,{
method: "PUT",
headers: {
Authorization: `Bearer ${jwt}`,
"Content-Type": "application/json"
},
body: JSON.stringify(fields)
})
const data = await resp.json()
console.log('Fields data',data);
}
if(files.files){
console.log('There are files in there',`${process.env.NEXT_PUBLIC_API_URL}/upload`, req.headers["content-type"],);
const fileStream = fs.createReadStream(files.files.filepath);
const formData = new FormData();
formData.append('files', fileStream, files.files.originalFilename);
formData.append('ref', 'plugin::users-permissions.user')
formData.append('refId', user_id)
formData.append('field', 'profile_picture')
const imageResp = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/upload`,{
method: "POST",
headers: {
Authorization: `Bearer ${jwt}`
},
body: formData
})
const imageData = await imageResp.json()
console.log('imageData',imageResp, imageData);
}
res.status(200).json({ fields, files });
} else {
res.status(405).json({ error: 'Method not allowed' });
}
}
export const config = {
api: {
bodyParser: false,
},
};
Despite this implementation, I keep encountering an error message from Strapi:
{
data: null,
error: {
status: 400,
name: 'ValidationError',
message: 'Files are empty',
details: {}
}
}
I've been troubleshooting this issue for the past couple of weeks without any success. What could possibly be going wrong with my current setup?