javascript - Cloudinary Base64 Image uploading in angularjs -

javascript - Cloudinary Base64 Image uploading in angularjs -

$http({method: 'post', url: $rootscope.cloudinary_config.upload_url, info : { file : canvasimage, resource_type : 'image', format: "jpg", timestamp : 1375363550, api_key : $rootscope.cloudinary_config.api_key, signature : signature, public_id : scope.model.public_id }, headers : {"x-requested-with": "xmlhttprequest", "content-type" : "multipart/formdata"} }).success(function(data, status, headers, config) { console.log("success"); }).error(function(data, status, headers, config) { console.log("fail"); });

i trying upload base64 image cloudinary account. have checked whether signature, api key, upload url , canvasimage correct. yet whenever request sent,

i error in response :

{"error":{"message":"missing required parameter - file"}}

on checking request payload can see file parameter beingness passed.

the canvasimage base64 jpg. of sort - data:image/jpeg;base64,/9j/4aaqskzjrgaba.

can't find of sort in cloudinary documentation.

firstly, formdata object. you'll want utilize if you're uploading multi-part form data.

basically, formdata object allows append files, blobs, , strings (if attach isn't of three, stringify it) using function has, append i.e:

var newform = new formdata(); newform.append('filename', file); newform.append('api_key', $rootscope.cloudinary_config.api_key); newform.append('signature', signature); newform.append(public_id, scope.model.public_id);

and on..

next.

set content-type undefined instead of multi-part form data. seems unintuitive, however, happens browser automatically set proper boundary , automatically set content-type multipart/formdata.

additionally, add together transformrequest config set angular.identity. browser seek serialize form data, hence need stop doing setting transformrequest angular.identity.

the overall $http request should this:

$http.post(url, newform, { transformrequest: angular.identity, headers: {'content-type': undefined} }) .success(function(data){ // success }) .error(function(err){ // log error })

also note formdata tricky deal because if console formdata object, i.e.(console.log(newform)) show is: formdata {append: function}

javascript angularjs cloudinary