In this chapter, we're going to focus on banner upload. And it's going to be quite simple because we have an exact component we can reuse that looks just like this. In order to do this, we first have to implement the banner uploader in UploadThing Core TS. So let's go ahead and do that. So I'm gonna go inside of my app, API, Upload Thing Core.TS and we already have the thumbnail uploader So I'm going to copy the entire thing and I'm just going to paste it above.
So we now have two thumbnail uploaders and change this one to be the banner uploader. Now for the image, it can be exactly the same. Four megabytes and max file count of 1. And now inside of here this is what we are going to do. We don't need the input so we are just using the middleware.
If there is no clerk user ID we throw an unauthorized error. Then we find the database user and if that's missing as well we also throw unauthorized. Now instead of searching for an existing video here is what we're going to do. We can completely remove this part and what we have to do is we have to check does this user have a banner already. So for that we're going to check if we have user banner key because remember in the previous chapter we added banner key and we also handled Bonnex Drizzle Kit push so make sure you do that and then you should have the access to check if the user has a banner key.
If the user has a banner key we are simply going to delete it right here. User, banner, key. And let me just change this to existing user. I just like it more this way. If there is no existing user throw the error and then if existing user has the banner key, delete existing user banner key.
Then we are now updating the users here, and we will set the banner key to be null and the banner URL to be null. And we are specifically going to focus on user's ID, having the matching existing user ID. There we go, like this. And then instead of here, you can just return the user ID. We don't really need anything other than this.
Let me just check. So, okay, so I call this... Yeah, we don't need the input here at all. We did the cleanup here. So, this is what we're going to do.
We can just return the user ID. Actually, let's return clerk. We can do this, user ID, existing user ID. There we go. And then what we're gonna do here is we're going to update users, Banner URL to be the new file URL and Banner Key to be the new file key.
And very simply, one where user's ID equals metadata user ID. And you can return back metadata user ID here. So that's going to be the banner uploader. So just make sure that you are remapping this to a clerk user ID and then you fetch the database user in existing user and then you do all subsequent checks using the existing user. Existing user banner key, existing user banner key, existing user banner key, existing user ID, existing user ID is returned here.
And then inside of the metadata, we're using the user ID and we can compare with the actual ID. We don't have to use the clerk ID because this user ID comes from the database user right here. There we go. Now let's go ahead and let's copy the thumbnail upload model component. You can find it inside of modules, studio UI components.
So copy thumbnail upload model and then go inside of modules, inside of our users, UI components and paste it here and rename this to banner upload, banner upload model like this. The banner upload model will accept user ID instead of video ID and on upload complete we are simply going to revalidate users get one. ID will be user ID and then close itself. This will be upload a banner and it will simply use the banner uploader and remove the input. We don't need it.
And that's it. That's our entire component and let's rename it to banner uploader so instead of thumbnail upload it's gonna be banner upload model And now let's go ahead and go inside of user page banner here and let's render the banner upload model component. One thing we can already add is the user ID from user.id and now we also have to add the state. So let's go ahead and add const isBannerUploadModelOpen. I like to be specific, you don't have to be this specific of course.
You can just use isOpen and setIsOpen if you prefer. So isBannerUploadModelOpen is actually open, isBannerUploadModelOpen and onOpenChange set and set is open if you prefer. So is banner upload model open is actually open, is banner upload model open and on open change set is banner upload model open. And then when we click on this button here, we're just going to go ahead and set this to true. And now you should be able to visit your user here.
Make sure you are visiting your own user. Let's wait a second for our user to load. There we go. And now when I click this, it says upload a banner here. And I'm going to go ahead and just upload.
I don't know, I'm going to use the thumbnail. And it's going to be uploading now. So I'll pause my video and once it's finished, it should automatically revalidate this page and we should see the banner. And after it's uploaded, there we go. And if I go ahead and change it, the cleanup will be initiated and I will be able to replace that inside of my storage with this new one right here.
Amazing, amazing job. So it was that simple for us to implement the banner using the upload thing and the drop zone. What we're going to do next is implement small subscription list right here. Amazing, amazing jump. Let's go ahead and mark these as completed and see you in the next chapter.
Thank you. Bye-bye. Bye-bye.