How to get file data from FileUpload

[chrishj]

Hi,

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>
						}
/>

In the pages/api directory, the route handler is:

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,
	},
};

There does not appear to be any file data that can be sent to AWS as the console log gives the output shown below

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