Next.js Discord

Discord Forum

Unable to do signed upload in next-cloudinary.

Answered
Tan posted this in #help-forum
Open in Discord
TanOP
Hi guys I am not sure is this post belong to here or not. Please forgive me if I wasn't supposed to post here. I was hoping help from someone here in the group who have tried signed upload in cloudinary using next-cloudinary

My problem is whenever I use signed upload it just don't work. I tried unsigned upload and it is working perfectly fine. I followed the docs and did as per they say. I created a route /api/sign and frontend is hitting that request too. And also getting response. So I guess from api side its working fine. However here is my route.ts

import { v2 as cloudinary } from "cloudinary";
import { NextRequest, NextResponse } from "next/server";

export const POST = async (req: NextRequest) => {
  const body = await req.json();
  const { paramsToSign } = body;
  console.log(body);

  const apiSecret = process.env.CLOUDINARY_API_SECRET;

  try {
    if (apiSecret) {
      const signature = cloudinary.utils.api_sign_request(
        paramsToSign,
        apiSecret,
      );
      return NextResponse.json(signature);
    } else {
      return NextResponse.json({ message: "API secret not found." });
    }
  } catch (error) {
    console.log(error);
    return NextResponse.json(error);
  }
};

In the frontend I am using CldUploadButton
Here is the page.tsx

"use client";
import { CldUploadButton } from "next-cloudinary";

import React from "react";

const page = () => {
  return (
    <div>
      <CldUploadButton
        uploadPreset="startuphire"
        signatureEndpoint="/api/sign"
        onUpload={(res) => console.log(res.info)}
      />
    </div>
  );
};

export default page;

When I hit upload then I see status 200 on the network tab and also get signature. Here is a screenshot :

And after I select the image it gets the response and then automatically gets reset like in the picture.
Answered by Tan
The problem was I had to return an object like this from the server like this {signature : "abcdefg"} but I was sending plain text. Because their fuction for getting signature was destructuring the object and getting signature. 
function generateSignature(callback: Function, paramsToSign: object) {
    if ( typeof signatureEndpoint === 'undefined' ) {
      throw Error('Failed to generate signature: signatureEndpoint undefined.')
    }
    fetch(signatureEndpoint, {
      method: 'POST',
      body: JSON.stringify({
        paramsToSign,
      }),
    })
      .then((r) => r.json())
      .then(({ signature }) => {  // Here they were destructuring
        callback(signature);
      });
  }

so I sent the response like this : return NextResponse.json({ signature });

And now its working.
View full answer

1 Reply

TanOP
The problem was I had to return an object like this from the server like this {signature : "abcdefg"} but I was sending plain text. Because their fuction for getting signature was destructuring the object and getting signature. 
function generateSignature(callback: Function, paramsToSign: object) {
    if ( typeof signatureEndpoint === 'undefined' ) {
      throw Error('Failed to generate signature: signatureEndpoint undefined.')
    }
    fetch(signatureEndpoint, {
      method: 'POST',
      body: JSON.stringify({
        paramsToSign,
      }),
    })
      .then((r) => r.json())
      .then(({ signature }) => {  // Here they were destructuring
        callback(signature);
      });
  }

so I sent the response like this : return NextResponse.json({ signature });

And now its working.
Answer