CODEWITHSUNDEEP
cloudinary
Dhimas Kirana
Dhimas Kirana

Reputation: 31

Alway get error: wrong uploadSignature on Signed uploads Cloudinary Widget

I follow the tutorial to upload multiple images using Cloudinary Widget. I want to use Signed Upload. https://cloudinary.com/documentation/upload_widget#signed_uploads

but i always get error wrong uploadSignature

The error: https://i.ibb.co/hgDhZx7/Screen-Shot-2019-08-07-at-8-25-51-AM.png

Invalid Signature source=uw&timestamp=1565139879&upload_preset=hjz6fg6e.
String to sign - 'source=uw&timestamp=1565139880&upload_preset=hjz6fg6e'.

It just little bit different on timestamp.

This is my codeigniter Layanan controller to generate signature

    public function uploadsignature() {
        echo 'source=uw&timestamp='.time().'&upload_preset=hjz6fg6e';
    }

And this is the javascript to handle upload using cloudinary widget

    <script type="text/javascript">
        var generateSignature = function(callback, params_to_sign){
          $.ajax({
       url     : '<?php echo base_url('layanan/uploadsignature'); ?>',
       type    : 'GET',
       dataType: 'text',
       data    : { data: params_to_sign},
       complete: function() {console.log('complete')},
       success : function(signature, textStatus, xhr) { callback(signature); },
       error   : function(xhr, status, error) { console.log(xhr, status, error); }
   });
      }
  </script>

  <script type="text/javascript">
    var myWidget = cloudinary.createUploadWidget({
          cloudName: 'my_cloud_name', 
          uploadPreset: 'hjz6fg6e',
          apiKey: 'my_api_key',
          uploadSignature: generateSignature}, (error, result) => { 
            if (!error && result && result.event === 'success') { 
              console.log('Done! Here is the image info: ', result.info); 
          }
      }
      )

        document.getElementById('upload_widget').addEventListener('click', function(){
            myWidget.open();
        }, false);
    </script>

I don't know why the timestamp is different. Just little bit different. Anyone can help me?

Upvotes: 3

Views: 292

Answers (2)

zmd94
zmd94

Reputation: 110

I have managed to do it in my rails ruby project. Firstly you must use Cloudinary::Utils.api_sign_request(params_to_sign, api_secret) to generate verified signature for signed upload. The params_to_sign consist of 3 items which are public_id, source and timestamp. The code as below:

TimeStamp = Time.now.to_i
params_to_sign = {public_id: "Sample", source: "uw", timestamp: TimeStamp}

You must add uploadSignatureTimestamp and publicId param in your cloudinary.createUploadWidget function. It must consist the same timestamp and public id that being generate for uploadSignature. Hope this help you.

Upvotes: 1

Michalk
Michalk

Reputation: 131

When using singed upload with the upload widget, you need to use the timestamp that the upload widget generated, and not to generate a new one on your server.

You should sign the payload that the widget sends to your server without adding or removing parameters from the payload.

The payload to sign is inside params_to_sign:

var generateSignature = function(callback, params_to_sign){
    $.ajax({
     url     : signature_endpoint_url,
     type    : "POST",
     dataType: "json",
     data    : params_to_sign,
     complete: function() {console.log("complete")},
     success : function(signature, textStatus, xhr) { callback(signature); },
     error   : function(xhr, status, error) { console.log(xhr, status, error); }
    });
  }

var widget = cloudinary.createUploadWidget({
            cloud_name: cloud_name,
                        api_key: api_key,
                        upload_signature: generateSignature,
            upload_preset: preset_name,
            sources: ['local', 'url'],

        }, (error, result) => {  


});

Upvotes: 4

Related Questions