A much simpler way you could do uploads using 

, be on the bleeding edge. Uploadthing has become more popular for its simplicity and benefits, and so in this guide we will do a demo showcasing how we can upload and serve the images.

Before we begin, you should make sure you have the following:

Have github account. If you don't have one, visit 

A basic understanding of Next.js (app router)

Here are some of the key points you will come up with:

What uploadthing is, and the benefits of using it.

Usage of uploadthing storage with NextJs.

Step-by-step guide to uploading and retrieving images.

Uploadthing provides services for file uploads, and serves for full stack Typescript applications. This ensures type safety in your applications, which is one of the great benefits that comes together with uploadthing. It has features like server-side authorization.

: UploadThing manages file hosting, making it easier for you to handle files without the hassle.

: You retain control by hosting the endpoint on your own servers, avoiding bandwidth costs while ensuring security.

 Uploadthing provides convenient components and hooks for seamless frontend file uploads.

 and create a project, name it and press the create app button to complete it.

That would be it, the next thing is to head to the 

 section on the left to grab your secret keys, this would enable us to have access to the files we have on this project. We will have access to read and write, also delete files whenever we need it.

The next thing we need to do is set up Next.js project, going with type safety, we will do Typescript. In your commandline, paste the following command and answer a few questions on it.

We will go with yes in all the questions. This will scanfold a folder structure like this:

We then have to install the uploadthing and it's react client library. Make sure you’re in your project's directory, open your command line and run the following command.

 file in the root directory of your project folder. Add your UploadThing secret key in here.

This is like a blueprint for handling our file uploads in our application. It defines what types of files we can upload, the maximum file size, and any server-side logic that should run before or after the upload.

In the above code, we’re importing the necessary functions, and defining the functions.

f({ image: { maxFileSize: "4MB" } }): This configures the uploader to accept images with a maximum size of 4MB.

.middleware(async ({ req }) => { ... }): This function runs on the server before the upload. It uses the fake auth function to check if the user is authorized. If not, it throws an error. You can get your authorization function work here.

.onUploadComplete(async ({ metadata, file }) => { ... }):

 This function runs after the upload is complete. It logs the 

 to the console and returns some metadata.

And finally exporting the file, and we would be able to use it in our other pages.

This code sets up your API to handle file upload requests at 

Uploadthing has a tailwind configuration, all we need to do is to wrap our Tailwind configuration with 

 adds UploadThing-specific styles to your Tailwind configuration, ensuring your file upload components are styled correctly.

 create ready-to-use upload components that we can add to our 

That’s it with the configuration, we can now use the upload thing button in other components to upload files and serve them.

Let’s add the upload button now, create a component, 

 simplifies file uploads in our Next.js application. It connects to a specific endpoint (in this case, 

), and handles both successful uploads and errors with customizable callbacks.

When we upload a file, it runs client-side, providing immediate feedback through alerts and console logs for completion or errors if we need to.

When an image is successfully uploaded, the URL returned, we store it in the state 

 is then used to display a preview of the uploaded image with the Image component.

 directive at the top of your file, since the UploadButton component needs to run on the client-side.

Yeah plugins, you may not want to see the loading state of the button, but an instant button ready to take in file uploads faster. All we gotta do is import it in our 

Our final page would look like this, upload and serve, you could also catch the url and store it in your database and fetch it later.

When you head up to the dashboard, you’ll find the uploaded image right there, and that’s it.

There are a variety of button uploads we could use, you can try 

In this guide, we covered how to integrate UploadThing with a Next.js project to upload and serve images/files. We discussed the benefits of using UploadThing, such as simplified file hosting, server-side authorization, and a great client experience. We then walked through setting up a Next.js project, installing UploadThing, configuring environment variables, creating a FileRouter, and creating components to handle file uploads.

By following this guide, you should now have a Next.js application capable of uploading and serving images/files using UploadThing. Enjoy the simplicity and benefits of using UploadThing in your projects!

Dive into our programming articles for insights and tips. Covering a range of topics, they're perfect for learners at any level eager to expand their knowledge.

Dive into our programming articles for insights and tips.

Articles

Next.js file uploads made easy with uploadthing - An alternate to s3 bucket

Practice Frontend, Android and iOS by building real world projects.