{"id":27981,"date":"2023-08-07T07:00:00","date_gmt":"2023-08-07T14:00:00","guid":{"rendered":"http:\/\/upload-images-with-vercel-serverless-functions"},"modified":"2025-06-26T11:00:46","modified_gmt":"2025-06-26T18:00:46","slug":"upload-images-with-vercel-serverless-functions","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/upload-images-with-vercel-serverless-functions","title":{"rendered":"Upload Images With Vercel Serverless Functions"},"content":{"rendered":"

With serverless functions, we can write backend or server-side code without the burden of managing servers. One of the core features of Next.js is the API routes<\/a> which provide an easy solution to create an API endpoint by allowing us to write server-side logic within our Next.js<\/a> application, which can then be deployed as Serverless Functions<\/a> to Vercel<\/a>.<\/p>\n

In this article, we\u2019ll look at the process of uploading images from a Next.js application to Cloudinary<\/a> using Vercel\u2019s Serverless Functions.<\/p>\n<\/div>\n\n

Setting Up the Project<\/h2>\n

Create a Next.js<\/a> app using the following command:<\/p>\n

npx create-next-app vercel-severless-upload\n<\/code><\/span><\/pre>\n
Next, add the project dependencies using the following command:<\/p>\n
npm install cloudinary axios multer streamifier dotenv\n<\/code><\/span><\/pre>\n
The Node Cloudinary SDK<\/a> will provide easy-to-use methods to interact with the Cloudinary APIs. axios<\/a> will serve as our HTTP client. Multer<\/a> is a Node.js middleware used to handle multipart\/form-data, the dotenv module will allow us to parse environment variables defined in a .env file, and streamifier<\/a> is used to convert a Buffer\/String into a readable stream.<\/p>\n
\nThere\u2019s an alternative way to handle image uploads by creating a Serverless Function to return a presigned URL, which wasn\u2019t covered in the initial setup. This method enhances security by generating a temporary URL for image uploads. Here\u2019s a simplified outline of the process:\n<\/p>\n
    \n
  1. Create a Serverless Function to return a presigned URL.\n
  2. Call this Serverless Function from the front-end to obtain the presigned POST URL.\n
  3. Allow the user to select an image for upload on the front-end.\n
  4. Forward the file to the obtained POST URL for upload.\n<\/li>\n<\/ol>\n
    \nThis presigned URL mechanism is beneficial, especially when considering Vercel\u2019s serverless function limit of 4.5MB, as it advises against uploading large images directly to your file system. \n<\/p>\n
    Setting Up Tailwind<\/h2>\n
    We\u2019ll use Tailwind CSS to give our application a decent look. Run the following command in your terminal:<\/p>\n
    npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n<\/code><\/span><\/pre>\n
    Now, add the following to your tailwind.config.js<\/code> file:<\/p>\n
    module<\/span>.exports = {\n  content<\/span>: [\n    \".\/pages\/**\/*.{js,ts,jsx,tsx}\"<\/span>,\n    \".\/components\/**\/*.{js,ts,jsx,tsx}\"<\/span>,\n  ],\n  theme<\/span>: {\n    extend<\/span>: {},\n  },\n  plugins<\/span>: [],\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Add the following to your styles\/global.css<\/code> file:<\/p>\n
    @tailwind<\/span> base;\n@tailwind<\/span> components;\n@tailwind<\/span> utilities;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
    Setting Up Cloudinary<\/h2>\n
    First, sign up for a free Cloudinary account<\/a> if you don\u2019t have one already. Displayed on your account\u2019s Management Console<\/strong> (aka Dashboard) are your Cloudinary credentials: your cloud name, API key, etc.<\/p>\n
    \"\"<\/p>\n
    Next, let\u2019s create environment variables to hold the details of our Cloudinary account. Create a new file called .env<\/code> at the root of your project and add the following to it:<\/p>\n
        CLOUD_NAME = YOUR CLOUD NAME HERE\n    API_KEY = YOUR API API KEY\n    API_SECRET = YOUR API API SECRET\n<\/code><\/span><\/pre>\n
    This will be used as a default when the project is set up on another system. To update your local environment, create a copy of the .env<\/code> file using the following command:<\/p>\n
    cp<\/span> .env<\/span> .env<\/span>.local<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
    By default, this local file resides in the .gitignore<\/code> folder, mitigating the security risk of inadvertently exposing secret credentials to the public. You can update the .env.local<\/code> file with your Cloudinary credentials.<\/p>\n
    Writing the Upload Logic<\/h2>\n
    Let\u2019s create a Serverless Function that will be used to upload images to Cloudinary. Create a file called upload.js<\/code> in your pages\/api<\/code> directory. Next.js treats files created inside the pages\/api<\/code> folder as API routes, and with these API routes, we can write some server-side logic to handle HTTP requests. In our case, we\u2019ll need just one route. Add the following to your upload.js<\/code> file:<\/p>\n
    import<\/span> multer from<\/span> \"multer\"<\/span>;\nimport<\/span> { v2 as<\/span> cloudinary } from<\/span> \"cloudinary\"<\/span>;\nimport<\/span> dotenv from<\/span> \"dotenv\"<\/span>;\nimport<\/span> streamifier from<\/span> \"streamifier\"<\/span>;\ndotenv.config();\nconst<\/span> storage = multer.memoryStorage();\nconst<\/span> upload = multer({ storage });\nconst<\/span> uploadMiddleware = upload.single(\"file\"<\/span>);\ncloudinary.config({\n  cloud_name<\/span>: process.env.CLOUD_NAME,\n  api_key<\/span>: process.env.API_KEY,\n  api_secret<\/span>: process.env.API_SECRET,\n  secure<\/span>: true<\/span>,\n});\nfunction<\/span> runMiddleware<\/span>(req, res, fn<\/span>) <\/span>{\n  return<\/span> new<\/span> Promise<\/span>((resolve, reject<\/span>) =><\/span> {\n    fn(req, res, (result) => {\n      if<\/span> (result instanceof<\/span> Error<\/span>) {\n        return<\/span> reject(result);\n      }\n      return<\/span> resolve(result);\n    });\n  });\n}\nexport<\/span> default<\/span> async<\/span> function<\/span> handler<\/span>(req, res<\/span>) <\/span>{\n  await<\/span> runMiddleware(req, res, uploadMiddleware);\n  console<\/span>.log(req.file.buffer);\n  const<\/span> stream = await<\/span> cloudinary.uploader.upload_stream(\n    {\n      folder<\/span>: \"demo\"<\/span>,\n    },\n    (error, result) => {\n      if<\/span> (error) return<\/span> console<\/span>.error(error);\n      res.status(200<\/span>).json(result);\n    }\n  );\n  streamifier.createReadStream(req.file.buffer).pipe(stream);\n}\nexport<\/span> const<\/span> config = {\n  api<\/span>: {\n    bodyParser<\/span>: false<\/span>,\n  },\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    In the code above, we\u2019ll first bring the necessary imports. We\u2019ll set up the Multer middleware, which provides us with two storage options: disk and memory storage. To keep things simple, we\u2019ll create an instance of Multer and initialize it with the storage option because we want our parsed files to be stored temporarily on the RAM; its return values are stored in a variable called upload<\/code>. Our application supports selecting one file, so we\u2019ll use Multer\u2019s upload.single<\/code> method and pass a string that will later be used to check for and parse files in the request body.<\/p>\n
    Next, we\u2019ll configure it with an object consisting of our Cloudinary credentials. We\u2019ll then define a utility function \u2014 runMiddleware<\/code>, and as its name suggests, it will allow us to run our middleware. The function will wait for the Multer middleware to execute before continuing or throw an error if an error occurs.<\/p>\n
    Finally, we\u2019ll define and export a request handler function that will be triggered by an HTTP request made to \/api\/upload<\/code>. This function starts by parsing the file contained in the request body using the Multer middleware. Once the file is parsed successfully, the Multer middleware will attach a file property to the request body, i.e., req.file<\/code>, which contains information about the file.<\/p>\n
    We\u2019ll pipe to the Cloudinary uploader using the upload_stream()<\/code> method, which accepts two arguments. The first is an object where you can define your upload parameters (we define our destination folder \u2014 demo<\/code>), and the second is a callback function that gets called when the piping is complete. The callback accepts two parameters \u2014 an error and the result. If an error occurs, it will be logged to the terminal, and if successful, we\u2019ll send the upload response we get from Cloudinary back to the client side.<\/p>\n
    By default, API Route handler functions will provide us with middleware \u2014 bodyParser<\/code> under the hood that automatically parses the contents of the request body, cookies, and queries. We\u2019ll overwrite this behavior by exporting a config object to disable the built-in parsing mechanism since Multer does that for us.<\/p>\n
    \nTo further enhance the uploading process with Vercel, you can try the following steps:\n<\/p>\n
      \n
    1. Create a Serverless Function to return a presigned URL:<\/strong> Instead of directly uploading to Cloudinary, you can use a presigned URL mechanism. This ensures that the upload URL is temporary and has a short lifespan, enhancing security.\n
    2. Vercel\u2019s Image Optimization:<\/strong> Remember, Vercel manages the infrastructure for uploading, optimizing, and delivering images. They optimize images based on factors like pixel density, format, size, and quality. These optimized images are cached on the Vercel Edge Network, ensuring faster delivery to end-users.\n
    3. Serverless Function Limit:<\/strong> Be aware of Vercel\u2019s serverless function limit of 4.5MB. It\u2019s advisable to avoid uploading large images directly. If you\u2019re integrating with other cloud providers, leverage their mechanisms, like the pre-signed URLs in AWS S3, to handle larger files.\n
    4. Vercel\u2019s Edge Network:<\/strong> This is both a Content Delivery Network (CDN) and a globally distributed platform for running compute at the edge. It ensures that your images are delivered quickly to users worldwide. This network stores content and runs compute in regions close to your customers or your data, which not only ensures quicker delivery of optimized images but also enhances the overall user experience by reducing latency.\n
      Building the Frontend<\/h2>\n
      We\u2019ll now compose a simple user interface to communicate with the serverless function. Add the following to your index.js<\/code> file:<\/p>\n
      import<\/span> { useState } from<\/span> \"react\"<\/span>;\nconst<\/span> UploadState = {\n  IDLE<\/span>: 1<\/span>,\n  UPLOADING<\/span>: 2<\/span>,\n  UPLOADED<\/span>: 3<\/span>,\n};\nObject<\/span>.freeze(UploadState);\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n  const<\/span> [uploadState, setUploadState] = useState(UploadState.IDLE);\n  const<\/span> [imgUrl, setImgUrl] = useState(\"\"<\/span>);\n  async<\/span> function<\/span> handleFormData<\/span>(e<\/span>) <\/span>{\n    setUploadState(UploadState.UPLOADING);\n    const<\/span> file = e.target.files[0<\/span>];\n    const<\/span> formData = new<\/span> FormData();\n    formData.append(\"file\"<\/span>, file);\n    const<\/span> res = await<\/span> fetch(\"\/api\/upload\"<\/span>, {\n      method<\/span>: \"POST\"<\/span>,\n      body<\/span>: formData,\n    });\n    const<\/span> data = await<\/span> res.json();\n    setImgUrl(data.secure_url);\n    setUploadState(UploadState.UPLOADED);\n  }\n  return<\/span> (\n    <div<\/span> className<\/span>=\"flex justify-center h-screen items-center\"<\/span>><\/span>\n      {uploadState !== UploadState.UPLOADED ? (\n        <div<\/span> className<\/span>=\"w-32\"<\/span>><\/span>\n          <label<\/span>\n            htmlFor<\/span>=\"image\"<\/span>\n            className<\/span>=\"block bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 text-center\"<\/span>\n          ><\/span>\n            {uploadState === UploadState.UPLOADING ? (\n              <span<\/span>><\/span>Uploading...<\/span<\/span>><\/span>\n            ) : (\n              <span<\/span>><\/span>Upload<\/span<\/span>><\/span>\n            )}\n            <input<\/span>\n              type<\/span>=\"file\"<\/span>\n              name<\/span>=\"file\"<\/span>\n              id<\/span>=\"image\"<\/span>\n              className<\/span>=\"hidden\"<\/span>\n              onChange<\/span>={handleFormData}<\/span>\n            \/><\/span>\n          <\/label<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      ) : (\n        <div<\/span> className<\/span>=\"w-96 text-green-500 \"<\/span>><\/span>\n          <span<\/span> className<\/span>=\"block py-2 px-3 text-green-500 text-center\"<\/span>><\/span>\n            Uploaded!\n          <\/span<\/span>><\/span>\n          <img<\/span> className<\/span>=\"w-full\"<\/span> src<\/span>={imgUrl}<\/span> alt<\/span>=\"Uploaded image\"<\/span> \/><\/span>\n        <\/div<\/span>><\/span>\n      )}\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
      This component allows users to select an image from their computer and gives them a button to upload the image, and it displays the image after a successful upload.<\/p>\n
      We\u2019ll create a function called handleFormData<\/code>, which embeds the file selected by the user into the request payload using the FormData API. Note that the string passed to the formData.append()<\/code> method must be the same as the string we specified in our Multer instance in the API file.<\/p>\n
      The payload is then used to initiate an HTTP request to the serverless function we created. It then sets the state of imgURL<\/code> as well as uploadState<\/code>.<\/p>\n
      In the JSX returned, we\u2019ll render an upload button. If an image is uploaded successfully, we\u2019ll render the image instead.<\/p>\n
      npm run dev\n<\/code><\/span><\/pre>\n
      Once the app is up and running, you should be able to select a file and upload it. Here\u2019s what mine looks like after a successful upload.<\/p>\n
      \"\"<\/p>\n
      Find the complete project here<\/a> on GitHub.<\/p>\n
      Conclusion<\/h2>\n
      This article walks you through the process of uploading images to Cloudinary using Next.js and Vercel\u2019s Serverless Functions. With Next.js API routes, we can write server-side logic within our Next.js<\/a> applications, which can then be deployed as Serverless Functions<\/a> to Vercel<\/a>. See here<\/a> for more on how to deploy a Next.js API route as a serverless function to Vercel.<\/p>\n
      ##Resources<\/p>\n
      Now you can start your application on http:\/\/localhost:3000\/<\/a> with the following command:<\/p>\n
    Next, we\u2019ll pipe from a readable stream by converting the buffer in the parsed file to a readable stream using the streamifier<\/strong><\/a> library.<\/p>\n