YUCCIE Comments - Answer Overflow

YUCCIE

•Created by YUCCIE on 1/23/2024 in #questions

Change File Name Automatically

Thanks Matheus. I have tried out this code but still not working. Superweird. When I do this on the FileUIpload page (i.e change the export const FileUpload and change the Interface. I get an error only on the fileName saying "Property fileName does not exist on type UploadFileREsponse<null>"

24 replies

TTCTheo's Typesafe Cult

•Created by YUCCIE on 1/23/2024 in #questions

Change File Name Automatically

I am not sure where to reflect this exactly, I literally began coding 3 weeks ago lol. Would you mind writing the additional lines you would incorporate on these files: the file-upload.tsx, the attachment-form (where I call the file-upload component)? That would be much appreciated so that I can see better what your suggestion is. Also, I guess there is no need to modify the route.ts and core.ts of Uploadthing. Thanks for the help thus far. File-upload.tsx:

"use client";

import { UploadDropzone } from "@/lib/uploadthing";
import { ourFileRouter } from "@/app/api/uploadthing/core";
import { toast } from "sonner";

interface FileUploadProps {
    onChange: (url?: string) => void;
    endpoint: keyof typeof ourFileRouter;
};

export const FileUpload = ({
    onChange,
    endpoint
}: FileUploadProps) => {
    return (
      <UploadDropzone
        endpoint={endpoint}
        onClientUploadComplete={(res) => {
          onChange(res?.[0].url);
        }}
        onUploadError={(error: Error) => {
          toast.error(`${error?.message}`);
        }}
      />
    );
}

"use client";

import { UploadDropzone } from "@/lib/uploadthing";
import { ourFileRouter } from "@/app/api/uploadthing/core";
import { toast } from "sonner";

interface FileUploadProps {
    onChange: (url?: string) => void;
    endpoint: keyof typeof ourFileRouter;
};

export const FileUpload = ({
    onChange,
    endpoint
}: FileUploadProps) => {
    return (
      <UploadDropzone
        endpoint={endpoint}
        onClientUploadComplete={(res) => {
          onChange(res?.[0].url);
        }}
        onUploadError={(error: Error) => {
          toast.error(`${error?.message}`);
        }}
      />
    );
}

The reference in my attachment-form.tsx of the file-upload:

<FileUpload 
                    endpoint="courseAttachment"
                    onChange={(url) => {
                        if (url) {
                            onSubmit({ url: url});
                        }
                    }}
                    />

<FileUpload 
                    endpoint="courseAttachment"
                    onChange={(url) => {
                        if (url) {
                            onSubmit({ url: url});
                        }
                    }}
                    />

24 replies

TTCTheo's Typesafe Cult

•Created by YUCCIE on 1/23/2024 in #questions

Change File Name Automatically

I want the easiest way of doing it. What matters at the end is just to display the correct name of the file (i,e FileName and not FileKey). The file upload component link to the URL field and I use it it my attachment form component. See my code below:

<FileUpload 
                    endpoint="courseAttachment"
                    onChange={(url) => {
                        if (url) {
                            onSubmit({ url: url});
                        }
                    }}
                    />

<FileUpload 
                    endpoint="courseAttachment"
                    onChange={(url) => {
                        if (url) {
                            onSubmit({ url: url});
                        }
                    }}
                    />

24 replies

TTCTheo's Typesafe Cult

•Created by YUCCIE on 1/23/2024 in #questions

Change File Name Automatically

Correct, here is how the db looks like :

model Attachment {
  id String @id @default(uuid())
  name String
  url String @db.Text

  courseId String
  course Course @relation(fields: [courseId], references: [id], onDelete: Cascade)

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([courseId])
}

model Attachment {
  id String @id @default(uuid())
  name String
  url String @db.Text

  courseId String
  course Course @relation(fields: [courseId], references: [id], onDelete: Cascade)

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([courseId])
}