Ace Comments - Answer Overflow

Ace

•Created by Ace on 8/4/2024 in #questions

From 0 to production tutorial help with uploadthing implementation - UploadButton stuck on loading

import { SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/nextjs";
import { UploadButton } from "~/utils/uploadthing";
import { UpdatePrefs } from "./updateprefs";

export function TopNav() {
  return (
    <nav className="flex items-center justify-between flex-wrap bg-slate-600 p-6 w-full text-white text-xl font-semibold border-b border-slate-400">
      <div>Gallery</div>
      <div className="flex flex-row ">
        <SignedOut>
          <SignInButton />
        </SignedOut>
        <SignedIn> 
        <UploadButton
        endpoint="imageUploader"></UploadButton>
        <UserButton />
        <UpdatePrefs />
        </SignedIn>
        </div>
    </nav>
  );
}

Just this

6 replies

TTCTheo's Typesafe Cult

•Created by Ace on 8/4/2024 in #questions

From 0 to production tutorial help with uploadthing implementation - UploadButton stuck on loading

For sure - thanks for helping me look into it

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

core.ts

import { createUploadthing, type FileRouter } from "uploadthing/next";
import { UploadThingError } from "uploadthing/server";
 
const f = createUploadthing();
 
const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
 
// FileRouter for your app, can contain multiple FileRoutes
export const ourFileRouter = {
  // Define as many FileRoutes as you like, each with a unique routeSlug
  imageUploader: f({ image: { maxFileSize: "4MB" } })
    // Set permissions and file types for this FileRoute
    .middleware(async ({ req }) => {
      // This code runs on your server before upload
      const user =  auth(req);
 
      // If you throw, the user will not be able to upload
      if (!user) throw new UploadThingError("Unauthorized");
 
      // Whatever is returned here is accessible in onUploadComplete as

metadata


      return { userId: user.id };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      // This code RUNS ON YOUR SERVER after upload
      console.log("Upload complete for userId:", metadata.userId);
 
      console.log("file url", file.url);
 
      // !!! Whatever is returned here is sent to the clientside

onClientUploadComplete

 callback
      return { uploadedBy: metadata.userId };
    }),
} satisfies FileRouter;
 
export type OurFileRouter = typeof ourFileRouter;

Let me know if I missed something or you need something else?

6 replies

Gaming

Programming