Guide
Config
Plugin
API
Tutorials
Community
Guide
Config
Plugin
API
Tutorials
Community

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