UB
UploadBird
Back to Home

Code Examples

Real-world examples to get you started quickly.

Basic File Upload

Next.js

Simple file upload with Next.js App Router

import { UploadButton } from "@uploadbird/react";

export default function Page() {
  return (
    <UploadButton
      endpoint="imageUploader"
      onClientUploadComplete={(res) => {
        console.log("Files: ", res);
      }}
    />
  );
}

Image Upload with Preview

React

Upload images with preview before submission

import { useUploadThing } from "@uploadbird/react";

export function ImageUpload() {
  const { startUpload } = useUploadThing("imageUploader");
  
  const handleUpload = async (files: File[]) => {
    const res = await startUpload(files);
    console.log("Uploaded:", res);
  };
  
  return <input type="file" onChange={(e) => handleUpload(e.target.files)} />;
}

Server-side Upload

Node.js

Upload files from your server

import { uploadFiles } from "@uploadbird/server";

const files = await uploadFiles({
  files: [file],
  endpoint: "imageUploader",
});

console.log("Uploaded:", files);

Need more examples?

Check out our documentation or contact support.