Ocean_dev Posts - Answer Overflow

Ocean_dev

•Created by Ocean_dev on 5/24/2024 in #questions

Client side Upload button disabling

one more question. In my form, i need "selectedCategory" to be selected. It is a useState which is either undefined or has a category value. Is there a way I can disable the upload button if that state variable is undefined (user must have category selected)? Thanks! I did this in core.ts if(selectedCategory === "") throw new UploadThingError("Need a category to be selected") But can i do this client-side too?

5 replies

TTCTheo's Typesafe Cult

•Created by Ocean_dev on 5/22/2024 in #questions

Send extra info (student id) to upload functionality

I have this client component:

"use client";

import { UploadButton } from "@/lib/utils/uploadthing";
import { updateStudentDocumentUrl } from "@/lib/actions/editStudent.actions";
import { DocumentType } from "@/lib/utils/types";

function StudentDocumentUpload({ studentId }: { studentId: string }) {
  return (
    <div>
      <UploadButton
        endpoint="fileUploader"
        onClientUploadComplete={async (res) => {
          await updateStudentDocumentUrl(
            studentId,
            res[0].url,
            DocumentType.BirthCertificate
          );
        }}
        onUploadError={(error: Error) => {
          alert(`ERROR! ${error.message}`);
        }}
      />
    </div>
  );
}

export default StudentDocumentUpload;

"use client";

import { UploadButton } from "@/lib/utils/uploadthing";
import { updateStudentDocumentUrl } from "@/lib/actions/editStudent.actions";
import { DocumentType } from "@/lib/utils/types";

function StudentDocumentUpload({ studentId }: { studentId: string }) {
  return (
    <div>
      <UploadButton
        endpoint="fileUploader"
        onClientUploadComplete={async (res) => {
          await updateStudentDocumentUrl(
            studentId,
            res[0].url,
            DocumentType.BirthCertificate
          );
        }}
        onUploadError={(error: Error) => {
          alert(`ERROR! ${error.message}`);
        }}
      />
    </div>
  );
}

export default StudentDocumentUpload;

Here is my core.ts

const f = createUploadthing();

export const ourFileRouter = {

  fileUploader: f(["image", "pdf", "text", "application/msword"])

    .middleware(async ({ req }) => {
      const { userId } = auth();
      if (!userId) throw new UploadThingError("Unauthorized");
      return { userId };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      return { uploadedBy: metadata.userId, file: file };
    }),
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;

const f = createUploadthing();

export const ourFileRouter = {

  fileUploader: f(["image", "pdf", "text", "application/msword"])

    .middleware(async ({ req }) => {
      const { userId } = auth();
      if (!userId) throw new UploadThingError("Unauthorized");
      return { userId };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      return { uploadedBy: metadata.userId, file: file };
    }),
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;

i did this and it did not work because i think i am trying to call server action like this. Is there a way I can pass extra into to the upload function or middleware so i can call this server action in the same file as "api/uploadthing/core.ts" ? Or is there a better way to do this? All I am trying to do is, after a document is uploaded, I call a server action that will update the student's document with the file url. I cannot use the auth() because student is not who logs in, it is my users who "have" stdudents. Students aren't my users. So, I can't get their Id from auth.

1 replies

Gaming

Programming