useUploadFiles

A React (opens in a new tab) hook for implementing file upload using completely custom UI.

Live demo

An example use case is shown below, try it out!

Not uploaded anything yet

Example source code

src/App.tsx

import { useMutation } from "convex/react";
import { useUploadFiles } from "@xixixao/uploadstuff";
import { api } from "../convex/_generated/api";
 
export function App() {
  const generateUploadUrl = useMutation(api.files.generateUploadUrl);
  const { startUpload } = useUploadFiles(generateUploadUrl);
  return (
    <input
      type="file"
      multiple
      onChange={async (event) => {
        const files = Array.from(event.target.files);
        if (files.length === 0) {
          return;
        }
        // optionally: do something with `files`...
        const uploaded = await startUpload(files);
        // optionally: do something with the response...
      }}
    />
  );
}

API

Check out the source code.

UploadDropzone uploadFiles