File Upload
BFF combined with runtime framework provides file upload capabilities, supporting integrated calls and pure function manual calls.
BFF Function
First, create the api/lambda/upload.ts file:
api/lambda/upload.ts
export const post = async ({ formData }: {formData: Record<string, any>}) => {
console.info('formData:', formData);
// do somethings
return {
data: {
code: 0,
},
};
};Tip
The formData parameter in the interface processing function can access files uploaded from the client side. It is an Object where the keys correspond to the field names used during the upload.
Integrated Calling
Next, directly import and call the function in src/routes/upload/page.tsx:
routes/upload/page.tsx
import { upload } from '@api/upload';
import React from 'react';
export default (): JSX.Element => {
const [file, setFile] = React.useState<FileList | null>();
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFile(e.target.files);
};
const handleUpload = () => {
if (!file) {
return;
}
upload({
files: {
images: file,
},
});
};
return (
<div>
<input multiple type="file" onChange={handleChange} />
<button onClick={handleUpload}>upload</button>
</div>
);
};Tip
Note: The input type must be { formData: FormData } for the upload to succeed.
Manual Calling
You can manually upload files using the fetch API, when calling fetch, set the body as FormData type and submit a post request.
routes/upload/page.tsx
import React from 'react';
export default (): JSX.Element => {
const [file, setFile] = React.useState<FileList | null>();
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFile(e.target.files);
};
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData();
if (file) {
for (let i = 0; i < file.length; i++) {
formData.append('images', file[i]);
}
await fetch('/api/upload', {
method: 'POST',
body: formData,
});
}
};
return (
<form onSubmit={handleSubmit}>
<input multiple type="file" onChange={handleChange} />
<button type="submit">upload</button>
</form>
);
};