Cloudinary jQuery上传授权

Question

我正在使用Force.com Apex和VF试图利用Cloudinary进行一些内容管理。我卡上的Chrome以下（不知道为什么会出现“未定义”作为云名称被JS定义）：

POST https://api.cloudinary.com/v1_1/undefined/upload 401 (Unauthorized) ...... api.cloudinary.com/v1_1/undefined/upload:1 

在无奈的点会很感激的任何援助。下面的代码（附注注释）：

• 的APEX

：

public String getCldSig() { 

     Datetime d = datetime.now(); 
     Long uxtime = d.getTime()/1000; //method provides epoch/unix time 
     String apisec = '<some_secret>'; 
     String serial = 'callback=<some_url>&public_id=<some_id>&timestamp=' + uxtime + apisec; 
     Blob sha = Crypto.generateDigest('SHA1', Blob.valueOf(serial)); 
     String sig = EncodingUtil.convertToHex(sha); //perhaps I need to do UTF-8 
     String jsoSerial = '{"public_id":"<some_Id>",'; 
     jsoSerial += '"timestamp":"'+ uxtime + '",'; 
     jsoSerial += '"callback":"<some_url>",'; //maybe an issue with hosting the CORS html on a VF page. 
     jsoSerial += '"signature":"' + sig + '",'; 
     jsoSerial += '"api_key":"<some_key>"}'; 
     return jsoSerial.escapeHtml3(); //seems to be the right escape output HTML 
} 

• 的JavaScript/jQuery的：

     $.cloudinary.config({"api_key":"<some_key>", "cloud_name":"<some_id>"});      
         $('.cloudinary-fileupload') 
          .fileupload({ 
          dropZone: ".sceneUpBtn", 
          progress: function (e, data) { 
           $(".progress").text("Uploading... " + Math.round((data.loaded * 100.0)/data.total) + "%"); 
          } 
          }); 
         $('.cloudinary-fileupload').bind('fileuploadstart', function(e){ 
          $('.sceneUpPrev').html('Upload started...'); 
         });      
         $('.cloudinary-fileupload').bind('fileuploadfail', function(e){ 
          $('.sceneUpPrev').html($.cloudinary.error); //**due to lack of documentation don't know how to get any specific error message using the jQuery library. Would expect messages similar to AWS S3 
         });  
         $('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) { 
          $('.sceneUpPrev').html(
           $.cloudinary.image(data.result.public_id, 
            { format: data.result.format, version: data.result.version, 
            crop: 'scale', width: 200 }));  
          $('.image_public_id').val(data.result.public_id);  
          return true; 
         }); 
  

输入HTML：

<input class="cloudinary-fileupload" 
data-cloudinary-field="upref" 
data-form-data="&quot;public_id&quot;:&quot;<some_id>&quot;,&quot;timestamp&quot;:&quot;1372282433&quot;,&quot;callback&quot;:&quot;<some_url>&quot;,&quot;signature&quot;:&quot;<some_sig>&quot;,&quot;api_key&quot;:&quot;<some_key>&quot;}" 
id="sceneUpload" 
name="file" 
type="file"> 

Answer 1

在Tal Cloudinary的帮助下，我获得了成功！我会回顾一下解决方案：

1. 不要实例Cloudinary在$（文件）库。就绪（），而不仅仅是直接在脚本部分

   <script type="text/javascript">    
       $.cloudinary.config({"api_key":"<key>","cloud_name":"<cloud_name>"}); 
   

2. 实例化FORMDATA插上 与FileUpload小部件，这确保fileUpload
   加载您的json发送参数（这是一个时间问题）。

       $('.cloudinary-fileupload').fileupload({ 
            formData : <unescaped json params>, 
            dropZone: $('.sceneUpBtn'),        
            dataType: 'json', 
            done: function (e, data) { 
             $.each(data.result.files, function (index, file) { 
              $('<p/>').text(file.name).appendTo('#filename'); 
             }); 
             }, 
            progressall: function (e, data) { 
             var progress = parseInt(data.loaded/data.total * 100, 10); 
             $('.sceneUpBar').css('width',progress + '%'); 
            } 
          }); 
   

3. 将签名参数匹配到发送给服务器的json参数。在顶点的标志，并返回JSON这样：

   public String getCloudinarySig() { 
       Datetime d = datetime.now(); 
       Long uxtime = d.getTime()/1000; //epoch unix time method in force.com 
       String apisec = '<secret>'; 
       String serial = 'callback=<cors url>&timestamp=' + uxtime + apisec; //Signature needs params here need to match json params below 
       Blob sha = Crypto.generateDigest('SHA1', Blob.valueOf(serial)); //Sha1 digest 
       String sig = EncodingUtil.convertToHex(sha); //Hex conversion 
       String jsoSerial = '{'; 
       jsoSerial += '"api_key":"<key>",'; //these json params need to match signature params above  
       jsoSerial += '"<CORS_url>",';     
       jsoSerial += '"signature":"' + sig + '",'; 
       jsoSerial += '"timestamp":'+ uxtime; 
       jsoSerial += '}'; 
       return jsoSerial;  
   

   }

乐意回答任何问题......

Answer 2

文章网址的“不确定”部分是指Cloudinary的jQuery库无法确定cloud_name生成帖子网址时。 这很可能是因为$ .cloudinary.config函数调用得太晚。请将此调用移至$（document）.ready或类似结构之外。

多一个（无关）点 - 第二行中的选择器缺少'。'它应该读$（'。cloudinary-fileupload'）