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:

```ts title="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`:
```tsx title="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.

```tsx title="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>
  );
};
```
