title: Cloudinary jQuery Upload Authorization
body: <p>I'm using Force.com Apex and VF trying to utilize Cloudinary for some content management. I'm stuck on the following from Chrome (not sure why it shows 'undefined' as Cloud Name is defined in JS):</p>
  
  <pre><code>POST https://api.cloudinary.com/v1_1/undefined/upload 401 (Unauthorized)    ......    api.cloudinary.com/v1_1/undefined/upload:1
  </code></pre>
  
  <p>At a point of frustration would really appreciate any assistance. Here's the code (note comments):</p>
  
  <ul>
  <li>The APEX</li>
  </ul>
  
  <p>:</p>
  
  <pre><code>public String getCldSig() {
  
          Datetime d = datetime.now();
          Long uxtime = d.getTime() / 1000; //method provides epoch/unix time
          String apisec = '&lt;some_secret&gt;';
          String serial = 'callback=&lt;some_url&gt;&amp;public_id=&lt;some_id&gt;&amp;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":"&lt;some_Id&gt;",';
          jsoSerial += '"timestamp":"'+ uxtime + '",'; 
          jsoSerial += '"callback":"&lt;some_url&gt;",';  //maybe an issue with hosting the CORS html on a VF page.
          jsoSerial += '"signature":"' + sig + '",'; 
          jsoSerial += '"api_key":"&lt;some_key&gt;"}';
          return jsoSerial.escapeHtml3(); //seems to be the right escape output HTML
  }
  </code></pre>
  
  <ul>
  <li><p>The Javascript/jQuery:</p>
  
  <pre><code>                $.cloudinary.config({"api_key":"&lt;some_key&gt;", "cloud_name":"&lt;some_id&gt;"});                       
                  $('.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;
                  }); 
  </code></pre></li>
  </ul>
  
  <p>Input HTML:</p>
  
  <pre><code>&lt;input class="cloudinary-fileupload" 
  data-cloudinary-field="upref" 
  data-form-data="&amp;quot;public_id&amp;quot;:&amp;quot;&lt;some_id&gt;&amp;quot;,&amp;quot;timestamp&amp;quot;:&amp;quot;1372282433&amp;quot;,&amp;quot;callback&amp;quot;:&amp;quot;&lt;some_url&gt;&amp;quot;,&amp;quot;signature&amp;quot;:&amp;quot;&lt;some_sig&gt;&amp;quot;,&amp;quot;api_key&amp;quot;:&amp;quot;&lt;some_key&gt;&amp;quot;}" 
  id="sceneUpload" 
  name="file" 
  type="file"&gt;
  </code></pre>