import { generateComponents } from "@uploadthing/react";
 
import type { OurFileRouter } from "~/app/api/uploadthing/core";
 
export const { UploadButton, UploadDropzone } =
  generateComponents<OurFileRouter>();

import { UploadButton } from "@uploadthing/react";
 
import { OurFileRouter } from "./api/uploadthing/core";
 
export const OurUploadButton = () => (
  <UploadButton<OurFileRouter>
    endpoint="imageUploader"
    onClientUploadComplete={(res) => {
      // Do something with the response
      console.log("Files: ", res);
      alert("Upload Completed");
    }}
    onUploadError={(error: Error) => {
      // Do something with the error.
      alert(`ERROR! ${error.message}`);
    }}
    onBeforeUploadBegin={(files) => {
      // Preprocess files before uploading (e.g. rename them)
      return files.map(
        (f) => new File([f], "renamed-" + f.name, { type: f.type }),
      );
    }}
    onUploadBegin={(name) => {
      // Do something once upload begins
      console.log("Uploading: ", name);
    }}
  />
);

export type UploadFileResponse<TServerOutput> = {
  name: string;
  size: number;
  key: string;
  url: string;
 
  // Matches what's returned from the serverside `onUploadComplete` callback
  serverdata: TServerOutput;
};

import { UploadDropzone } from "@uploadthing/react";
 
import { OurFileRouter } from "./api/uploadthing/core";
 
export const OurUploadDropzone = () => (
  <UploadDropzone<OurFileRouter>
    endpoint="withoutMdwr"
    onClientUploadComplete={(res) => {
      // Do something with the response
      console.log("Files: ", res);
      alert("Upload Completed");
    }}
    onUploadError={(error: Error) => {
      alert(`ERROR! ${error.message}`);
    }}
    onUploadBegin={(name) => {
      // Do something once upload begins
      console.log("Uploading: ", name);
    }}
  />
);

import { generateReactHelpers } from "@uploadthing/react/hooks";
 
import type { OurFileRouter } from "~/app/api/uploadthing/core";
 
export const { useUploadThing, uploadFiles } =
  generateReactHelpers<OurFileRouter>();

// Note: `useUploadThing` is IMPORTED FROM YOUR CODEBASE using the `generateReactHelpers` function
import type { FileWithPath } from "@uploadthing/react";
import { useDropzone } from "@uploadthing/react/hooks";
import { generateClientDropzoneAccept } from "uploadthing/client";
 
import { useUploadThing } from "~/utils/uploadthing";
 
export function MultiUploader() {
  const [files, setFiles] = useState<File[]>([]);
  const onDrop = useCallback((acceptedFiles: FileWithPath[]) => {
    setFiles(acceptedFiles);
  }, []);
 
  const { startUpload, permittedFileInfo } = useUploadThing(
    "myUploadEndpoint",
    {
      onClientUploadComplete: () => {
        alert("uploaded successfully!");
      },
      onUploadError: () => {
        alert("error occurred while uploading");
      },
      onUploadBegin: () => {
        alert("upload has begun");
      },
    },
  );
 
  const fileTypes = permittedFileInfo?.config
    ? Object.keys(permittedFileInfo?.config)
    : [];
 
  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept: fileTypes ? generateClientDropzoneAccept(fileTypes) : undefined,
  });
 
  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <div>
        {files.length > 0 && (
          <button onClick={() => startUpload(files)}>
            Upload {files.length} files
          </button>
        )}
      </div>
      Drop files here!
    </div>
  );
}

const { startUpload, isUploading, permittedFileInfo } = useUploadThing(
  endpoint,
  opts: {
    onClientUploadComplete: ({fileKey: string, fileUrl: string}[]) => void
    onUploadError: (error: Error) => void
    onUploadProgress: (progress: number) => void
    onUploadBegin: (fileName: string) => void
  },
);

// Note: this is IMPORTED FROM YOUR CODEBASE using the `generateReactHelpers` function
import { uploadFiles } from "~/utils/uploadthing";
 
const uploadSomeFiles = async () => {
  const files = [
    new File(["foo"], "foo.txt", {
      type: "text/plain",
    }),
  ];
 
  const res = await uploadFiles("yourEndpoint", {
    files,
    input: {}, // will be typesafe to match the input set for `imageUploader` in your FileRouter
  });
};

uploadFiles(endpoint: string, opts: {
  files: File[],
  input?: {} // will be typesafe to match the input set for `endpoint` in your FileRouter
})