Cloudy jQuery 업로드 권한 부여

Question

일부 컨텐츠 관리에 Cloudinary를 사용하려고하는 Force.com Apex 및 VF를 사용하고 있습니다. 나는 (클라우드 이름은 JS에 정의로는 '정의되지 않은'쇼 왜 확실하지) 크롬에서 다음에 붙어 : 좌절의 시점에서

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

어떤 도움을 정말 감사하겠습니다.

• 정점

:

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 
} 

• 자바 스크립트/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 :에서 POST URL의

<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

Cloudal의 Tal의 도움으로 많은 성공을 거뒀습니다. 나는 해결책을 요약하자면 있습니다 :

1. 대신 직접 스크립트 섹션

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

2. 인스턴스화 formData 내 에 연결, .ready()를 $ (문서)에 Cloudinary의 라이브러리를 초기화하지 마십시오 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

은 "정의되지 않은"부분은 POST URL이 생성 될 때 Cloudinary의 jQuery 라이브러리가 cloud_name를 판별 할 수 있음을 의미합니다. $ .cloudinary.config 함수가 너무 늦게 호출 되었기 때문일 수 있습니다. 이 호출을 $ (document) .ready 또는 유사한 구조 외부로 이동하십시오.

하나 이상의 (관련 없음) 지점 - 두 번째 줄의 선택기에 '.'이 없습니다. $ ('. cloudinary-fileupload')를 읽어야합니다.