Cloudinary returning 401 unauthorized on upload using jQuery

Question

First of all, I must say that the documentation for Cloudinary jQuery plugin is terrible. There needs to be a fully working demo that one can inspect and copy/paste from.

I've been trying to implement this plugin all day today to no avail. Everytime a request gets sent by the webserver, I get a 401 unauthorized response. Obviously I have already double and triple-checked the API key, and it is correct.

Please note that for the purposes of this question, I've obfuscated the source URL and api keys below...

My request:
Origin http://someurl
X-Requested-With XMLHttpRequest
User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/536.29.13 (KHTML, like Gecko) Version/6.0.4 Safari/536.29.13
Content-Type multipart/form-data; boundary=----WebKitFormBoundaryiv0wUvjBAxsYJx1q
Accept application/json, text/javascript, /; q=0.01
Referer http://someurl/cloudinary.html
multipart/form-data
Boundary ----WebKitFormBoundaryiv0wUvjBAxsYJx1q
Size 187B

And here is the response from cloudinary:

Status 401
Connection keep-alive
Content-Length 40
X-Request-Id ac82262506edc9fb37fd533383c3f650
X-UA-Compatible IE=Edge,chrome=1
Server cloudinary
Access-Control-Max-Age 1728000
Access-Control-Allow-Methods POST, GET, OPTIONS
Content-Type application/json; charset=utf-8
Access-Control-Allow-Origin http://someurl
Cache-Control no-cache

{"error":{"message":"Unknown API key "}}

My HTML page has the following

<html>
    <body>
    <input type="file" class="cloudinary-fileupload" data-cloudinary-field="image_upload" data-bind="attr:{'data-form-data':formData, name:tag}" data-form-data="%7B%22public_id%22%3A%221_overall%22%2C%22tags%22%3A%22overall%22%2C%22format%22%3A%22jpg%22%2C%22timestamp%22%3A%221367772489%22%2C%22callback%22%3A%22http%3A//someurl/cloudinary_cors.html%22%2C%22signature%22%3A%2205767fbf65bfff181c6ccc65b90a457a4a9189e0%22%2C%22api_key%22%3A%22some_api_key%22%7D" name="overall">
    <div class="preview"></div>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/jquery-ui.min.js"></script>
    <script src="js/vendor/jquery.iframe-transport.js"></script>
    <script src="js/vendor/jquery.fileupload.js"></script>
    <script src="js/vendor/jquery.cloudinary.js"></script>
    <script type="text/javascript">
        $.cloudinary.config({"api_key":"some_api_key","cloud_name":"some_cloud_name"});
        $('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {  $('.preview').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;
        });
    </script>   
    </body>
</html>

Tal Lev-Ami Tal Lev-Ami · Accepted Answer · 2013-05-06T12:51:22

The data-form-data attribute needs to be HTML encoded and not URL encoded, e.g., the data-form-data in your example should have been:

{&quot;public_id&quot;:&quot;1_overall&quot;,&quot;tags&quot;:&quot;overall&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;timestamp&quot;:&quot;1367772489&quot;,&quot;callback&quot;:&quot;http://someurl/cloudinary_cors.html&quot;,&quot;signature&quot;:&quot;05767fbf65bfff181c6ccc65b90a457a4a9189e0&quot;,&quot;api_key&quot;:&quot;some_api_key&quot;}

Cloudinary returning 401 unauthorized on upload using jQuery

1 Answers