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)

pages/api/token.ts

import { f0 } from "file0";

export default async function handler(req, res) {
  // Authorize the user here...
  const token = await f0.createToken("example.json");
  res.json({ token });
}

On the client side

FileUpload.tsx

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