A Brief Guide to This Valuable Feature
Hello everyone. Today, we will discuss three ways to upload files in your Next.js app. Each method has its own specific use case, so read on to the end.
To get started, I’ve created a basic page where the user can save a file as a . can upload to /api/upload end point
When the user clicks the button, we trigger a hidden file input. And when a new file is added, we send a POST request containing the file data.
Note that the icon comes from wing,
First, make sure you have access to the Google cloud storage bucket. Now you will need the service account key file. If you don’t have one, follow the steps listed Here to get a.
npm i @google-cloud/storage
Create a new folder named lib and a file called gcs.ts Inside. Now export a function that opens a write stream for the specified filename within the bucket.
we use node-formidable To handle file uploads in a Next.js API route. But by default, file parsing will not work in a serverless environment. then we have to install formidable-serverless, As a result, handling file uploads should work when deploying to Vercel, Netlify, etc.
npm i formidable
npm i -D @types/formidable
And here is the code to “promise” the form parsing.
Also note that we are putting the code formidable-serverless in our folder. Current version on npm . does not use the latest version of formidable,
Now, define a handler Serves in an API route file that only accepts POST and CALL method1,
We disable Next.js body parser to do formidable Do your work (with the currents of the body).
Now we can create a upload.ts file in libwhich handles the upload.
formidable uploads files to a temporary file on the server, so we can say a good ol’ fs.createReadStream, Then we a. can follow up with .pipe In the GCS bucket storage write stream.
This method is best suited if you want to run any preprocessing before sending the file to GCS. For example, you may want to extract metadata such as duration, bitrate, and title from an audio file.
But if you don’t want the file on the host machine, you can still upload it directly to GCS.
Now, let’s define method2, it will use fileWriteStreamHandler Asset to upload file stream directly.
and in our uploadStream function we should create a new PassThrough Example. a PassThrough section is necessary so that formidable stream, and we can still pipe it into GCS.
If the use of API routes limits the needs of your application, Next.js allows you to create a custom server. The only downside is that you can no longer use Vercel.
To begin with, we will use express To set up our backend server and define the upload route.
npm i express dotenv
npm i -D nodemon @types/express ts-node
Make sure the TypeScript server is configured with the file so that we can still import our file upload methods. You can find a working example on Next.js fund, In short, we have an additional . make use of tsconfig File View File Changes nodemon and typescript executes ts-node,
Let’s end this article by associating our server code with the endpoint.
Today, we’ve learned three different ways to upload a user’s files to Google Cloud Storage. Each with its own tradeoff.
and that’s all! If you liked this article, stay tuned for more.
You can find all the codes for this article Here on GitHub.
