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.
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
Now, define a
handler Serves in an API route file that only accepts POST and CALL
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
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.