> For the complete documentation index, see [llms.txt](https://docs.file0.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.file0.dev/examples/file-upload-component-next.js.md).

# File upload component (Next.js)

This example demonstrates how to upload a file from a Next.js application using tokens.

On the server side (pages router)

<pre class="language-typescript" data-title="pages/api/token.ts"><code class="lang-typescript"><strong>import { f0 } from "file0";
</strong>
export default async function handler(req, res) {
  // Authorize the user here...
  const token = await f0.createToken("example.json");
  res.json({ token });
}
</code></pre>

On the client side

{% code title="FileUpload.tsx" %}

```typescript
import { f0 } from "file0";

export function FileUpload() {
  const [file, setFile] = useState(null);

  const handleFileChange = (event) => {
      setFile(event.target.files[0]);
  };

  const upload = async () => {
    const { token } = await fetch("/api/token")
      .then((res) => res.json());

    f0.useToken(token).set(file);
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={uploadFile}>Upload</button>
    </div>
  );
}
```

{% endcode %}