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'）