Use case:
I am looking to upload image files and store them in AWS and then update the image shown on the page.
Call Upload file from the pages directory
Code: Select all
<FileUpload
id="imageData"
url="/api/v1/upload-aws"
onUpload={onFileUploadComplete}
accept="image/*"
maxFileSize={1000000}
emptyTemplate={
<p className="m-0">Drag and drop files to here to upload.</p>
}
/>
Code: Select all
import { IncomingForm } from 'formidable';
import { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
console.log(`Upload-aws called`);
const result = await formidableParse(req);
console.log(`result is ${JSON.stringify(result, null, 2)}`);
res.status(200).json('called upload-aws');
}
const formidableParse = (req: any) =>
new Promise((resolve, reject) => {
const form = new IncomingForm({ multiples: true });
form.parse(req, (err, fields, files) => {
if (err) return reject(err);
resolve({ fields, files });
});
});
export const config = {
api: {
bodyParser: false,
},
};
Code: Select all
result is {
"fields": {},
"files": {
"null": [
{
"size": 79404,
"filepath": "/var/folders/vs/hrlfdf3j62sc41wlz52crdyw0000gq/T/9e974debc40a3677fbb6bd901",
"newFilename": "9e974debc40a3677fbb6bd901",
"mimetype": "image/jpeg",
"mtime": "2023-09-03T06:36:47.256Z",
"originalFilename": "en_Rosy_gold.jpg"
}
]
}
}
It may well be that I am using the FileUpload component incorrectly.
Versions: formidable: 3.5.1 next: 13.4.19