Integrating Cloudinary with AngularJS

I am trying to upload an image directly to Cloudinary through AngularJS.  Here's some sample code:

uploadPhoto: function (result) {
return $http({
method: 'POST',
url: 'https://api.cloudinary.com/v1_1/drgbgbyrv/image/upload',
data:{
file: result.file,
api_key: result.api_key,
timestamp: result.timestamp,
signature: result.signature,
tags: result.tags
},
headers: {
"X-Requested-With": "XMLHttpRequest"
}
})

 

I am using 

https://github.com/cloudinary/cloudinary_parse

to generate the signature for the XHR request. 

 

I am getting the file data as follows:

var $photo = $('#photo');

$scope.file = $photo[0].files[0];

where $photo is the jquery object of selecting the input field. I am able to upload to Parse with similar code, but with cloudinary I am getting a 

{"error":{"message":"UnknownAPIkey"}}

401
Unauthorized
Any ideas why this would not work?
I am using Angular 1.2rc3. 
here are the raw headers being sent:
POST /v1_1/drgbgbyrv/image/upload HTTP/1.1 Host: api.cloudinary.com Connection: keep-alive Content-Length: 301 Cache-Control: no-cache Pragma: no-cache Origin: http://localhost:8080 X-Requested-With: XMLHttpRequest Content-Type: text/plain;charset=UTF-8 Accept: application/json, text/plain, */* User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 Referer: http://localhost:8080/ Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8
and raw payload: {"file":{"webkitRelativePath":"","lastModifiedDate":"2013-10-16T20:20:25.000Z","name":"fd4bf53d-bb53-49a4-a907-c197f71df75b-image.jpg","type":"image/jpeg","size":2354490},"api_key":"579987155471164","timestamp":1382044133,"signature":"7b1e1be7c5dd4315632f026bed4035ad54abc4bd","tags":"kellyrmilligan"}
do I need to use jquery file upload or should the above method work? any ideas?
Have more questions? Submit a request

Comments

Powered by Zendesk