1

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

欲求不満の時点で、どんな支援も本当に感謝します。コードは次のとおりです（コメントに注意してください）：

  • アペックス

:

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">
4

2 に答える 2

2

POST URL の「未定義」部分は、POST URL が生成されたときに Cloudinary の jQuery ライブラリが cloud_name を特定できなかったことを意味します。これはおそらく、$.cloudinary.config 関数の呼び出しが遅すぎるためです。この呼び出しを $(document).ready または同様の構造の外に移動してください。

もう 1 つの (関係のない) ポイント - 2 行目のセレクターに「.」がありません。$('.cloudinary-fileupload') となるはずです

于 2013-06-27T06:30:14.800 に答える
1

Cloudinary の Tal の助けを借りて、私は成功を収めました! 解決策を要約します。

  1. $(document).ready() で Cloudinary のライブラリをインスタンス化しないでください。代わりに、スクリプト セクション内に直接プラグインしてください。

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

  2. FileUpload ウィジェットを使用して formData をインスタンス化します。これにより、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 パラメーターと一致させます。Apex で署名し、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;

    }

どんな質問にも喜んで答えます...

于 2013-07-01T06:25:43.540 に答える