ckobasti•2y ago

UploadThing Dropzone Customization

Im tryng to customize UI of the Dropzone by changing the TailwindCSS classes in the node_modules, but nothing happens.. Does someone have a solution?

20 Replies

ian•2y ago

Are you editing the file in the node_modules folder or are you importing from there and passing a customization parameter that isn't working?

Indy•2y ago

By the way looking at the (slightly broken) docs here: https://uploadstuff.dev/api-reference/UploadDropzone#props. It looks like you can just pass the className property into the component to customize the look. If you find yourself modifying something in node_modules though, then I recommend just copy-pasting that code out right into your code base. Modifying node_modules will result in potentially very confusing outcomes and builds.

UploadDropzone – Nextra

Nextra: the next docs builder

ckobastiOP•2y ago

There is no such a customization parameter except className that basically isnt className and looks like this: className?: (state: UploadDropzoneState) => string; type UploadDropzoneState = { progress: number | null; isDragActive: boolean; } I want to change the border radius, text, colors.. so it matches my UI

Indy•2y ago

@Michal Srb I think that type infromation in the doc might be a bug. It doesn't quite make sense on the surface unless I missed something.

ckobastiOP•2y ago

I mean the most weird thing is that by changing the tailwind classes in node_modules, nothing happens.. I mean its ok to change UI in node_modules not the functionality I had experience with those types of stuff and never had any issue

Indy•2y ago

Yea I think I misread.

ckobastiOP•2y ago

ckobastiOP•2y ago

cant get it haha, sorry for spamming with questions last few days, but wanna make it my only platform for developing my apps, cuz i like the easyness

Indy•2y ago

Of course no problem! It's helpful when people ask questions (even ones we don't have easy answers too) because it helps us make the platform better for everyone. I am at a loss. There are other JS ecosystem experts floating around here that would have a better answer. But if I was in your place, I'd probably just copy that whole "UploadDropzone.tsx" out into my code base to reduce weird bundling variable.s

ckobastiOP•2y ago

I hate big components haha Just kidding, gonna do that immediately Love making it out of micro components 😆 it works!

ian•2y ago

className={()=> twMerge(…)} My guess is the argument is a function to provide a class name based on the upload state. If you always want the same class name you can just pass a function that returns the same string always

Indy•2y ago

Yea I peeked at the code that's what it seems to be doing: https://github.com/xixixao/uploadstuff/blob/main/lib/UploadDropzone.tsx#L104

GitHub

uploadstuff/lib/UploadDropzone.tsx at main · xixixao/uploadstuff

Contribute to xixixao/uploadstuff development by creating an account on GitHub.

Martha Lucr King Jr•11mo ago

Hey, how can i get the user id for the uploadthing middleware

export const ourFileRouter = {
  imageUploader: f({ image: { maxFileSize: '4MB' } })
    .middleware(async ({ req }) => {
      

      if (!userId) throw new UploadThingError('Unauthorized');

      return { userId };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      console.log('Upload complete for userId:', metadata.userId);
      console.log('file url', file.url);

      return { uploadedBy: metadata.userId };
    }),
} satisfies FileRouter;

export const ourFileRouter = {
  imageUploader: f({ image: { maxFileSize: '4MB' } })
    .middleware(async ({ req }) => {
      

      if (!userId) throw new UploadThingError('Unauthorized');

      return { userId };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      console.log('Upload complete for userId:', metadata.userId);
      console.log('file url', file.url);

      return { uploadedBy: metadata.userId };
    }),
} satisfies FileRouter;

ian•11mo ago

Worth calling out that https://uploadstuff.dev/ is a project that is different from https://uploadthing.com/ - the former uses convex, the latter is a cool project but I'd talk to Theo & team for help with support on it

uploadthing

An easier way to upload files.

Lebogang•2mo ago

Hi there Ian. hope you're well. is uploading thing supported now? thinking of using it, instead of going the AWS route

LisekPL•2mo ago

why don't you use storage from convex?

ampp•2mo ago

The cloudflare r2 component has a better value proposition for me so i skipped over upload thing for now. I wanted a example of how to do it to just copy so i didn't have to worry something was wrong with my design choices. The convex team had submitted a pr into upload thing for something but it got rejected. There are several people on theo's discord and convex that have implemented it. They are probably using it for t3 chat. I asked for examples. Nobody seems to care. this is the gold standard for convex now https://github.com/mikecann/ourfiles

GitHub

GitHub - mikecann/ourfiles: a simple way to share files on a privat...

a simple way to share files on a private network. Contribute to mikecann/ourfiles development by creating an account on GitHub.

ampp•2mo ago

theres a youtube video on that too

Lebogang•2mo ago

I'm self-hosting. So what I want to do is get Convex to use UploadThing for blob storage instead of AWS. Thanks man. I'll definately check this out

UploadThing Dropzone Customization

Did you find this page helpful?