Invalid Signature when upload video from media widget

I'm trying to upload video via media widget using signed signature method.
i develop on Laravel and jQuery.
Here is my backend:

public function generate_sign_signature(Request $request) {
   $params_to_sign=$request->query();
   $api_secret=config("cloudinary.cloud_api_secret");
   $signature= \Cloudinary\Api\ApiUtils::signParameters($params_to_sign, $api_secret);

   return response()->json($signature);
}

Here is my Javascript part:

<script type="text/javascript">

   var generateSignature,
      tutFolder = "tutorials/@php echo $item->id; @endphp",
      apiKey = "@php echo config('cloudinary.cloud_api_key'); @endphp",
      cloudName = "@php echo config('cloudinary.cloud_name'); @endphp";

   generateSignature = function(callback, params_to_sign) {
      $.ajax({
         url :"/api/v1/cloudinary/generate_sign_signature",
         type :"GET",
         dataType:"text",
         data : params_to_sign,
         complete:function() { console.log("completely generated cloudinary signed signature.") },
         success:function(signature, textStatus, xhr) {
            callback(signature);
         },

         error: function(xhr, status, error) { console.log(xhr, status, error); }
      });
   }

   cloudinary.applyUploadWidget(
      document.getElementById('upload_widget_opener'),
      {
         apiKey : apiKey,
         cloudName: cloudName,
         uploadPreset:"ml_default",
         uploadSignature: generateSignature,
         tags: ['video-tutorial'],
         resourceType:'video',
         folder: tutFolder,
         clientAllowedFormats: ['mp4', 'mov', 'wmv', 'flv', 'avi', 'avchd', 'webm', 'mkv'],
         form:'#step-5-form-new-part',
         fieldName:'upload_video[]',
         buttonClass:'cld--video-btn'

      }, function(error, result) {
         if(error) {
            console.error(error);
            return;
         }
         console.log(result);
   });
</script>

I also debugged the signature compare between manually generated and the actual response from SDK signParameters method, they're both the same.
I use this line in terminal by replace <secret_key> with mine:

echo -n "folder=tutorials/100007&source=uw&tags=video-tutorial&timestamp=1620035500&upload_preset=ml_default<secret_key>" | openssl sha1

The issue raised when requesting to this url to upload:

https://api.cloudinary.com/v1_1/<cloud_name>/video/upload

It is a POST http verb with formData:

```
folder: tutorials/100007
```
```
tags: video-tutorial
```
```
upload_preset: ml_default
```
```
source: uw
```

signature: "7b80e25f02da5ce9eefffac902f7574e0af4aa62"

```
timestamp: 1620035500
```
```
api_key: ****************
```
```
file: (binary)
```

I'm looking forward for the response from support team and anybody might help me out with this.
Thank you!

Daniel Mendoza

May 05, 2021 01:02

@Vinei

I apologize for getting to this late. It does seem odd and the signature you generated should have worked.

I am continuing to review the logs on our end.

Regards,

Daniel

Vinei

May 05, 2021 05:59

@Daniel
I appreciate your help, i'm looking forward to your investigation.
Thank you!

Aleksandar Kostadinov

May 07, 2021 12:06

Hi Vinei,

The generated signature was correct but we see that there are additional double quotes as part of the signature string which shouldn't be there and that's causing the mismatch.

For example, the signature is coming through as:

"7b80e25f02da5ce9eefffac902f7574e0af4aa62"

But it should be just:

7b80e25f02da5ce9eefffac902f7574e0af4aa62

May I please ask you to check the 'signature' value you receive in the front-end code to ensure it doesn't have the enclosing quotes?

May 14, 2021 15:28

Hi @Aleksandar,

I'm sorry it takes me a week to reply back. I got your point here.
I able to resolve the issue by replace the the double quote after get response from api controller.

var generateSignature = function(callback, params_to_sign) {
   $.ajax({
      url :"/api/v1/cloudinary/generate_sign_signature",
      type :"GET",
      dataType:"text",
      data : params_to_sign,
      complete:function() {console.log("completely generated cloudinary signed signature.")},
      success:function(signature, textStatus, xhr) {
         var escSignature =String(signature).replaceAll('\"','');
         callback(escSignature);
      },
      error:function(xhr, status, error) { console.log(xhr, status, error); }
   });
}

Thank you!

Invalid Signature when upload video from media widget

Comments

Didn't find what you were looking for?