tyler tyler - 1 year ago 197
AngularJS Question

Cloudinary client-side direct upload without jQuery

I'm using Cloudinary without jQuery and trying to make a direct upload through the browser.

I've followed the directions HERE and created an upload preset called


The problem is that when I make posts from the client (using Angular), I get the response:

XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/mycloud/image/upload. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials.

Which I understand is a CORS issue. I'm making the request as shown below.

req =
method: 'POST'
url: 'https://api.cloudinary.com/v1_1/mycloud/image/upload'
'Access-Control-Allow-Credentials': 'true'
file: scope.file
upload_preset: 'seller'
.success (data, status, headers, config) ->
console.log 'file is uploaded successfully. Response: ' + data
.error (err) ->
console.log 'file error', err

What am I missing? Is it just not possible to do a Cloudinary direct upload without their jQuery plugin?

Answer Source

Here is a working solution with AngularJS 1.3 to perform a direct unsigned upload on cloudinary without their jQuery plugin:

var file = /* your file */;
var cloud_name = 'your cloud_name';

var fd = new FormData();

fd.append('upload_preset', 'seller');
fd.append('file', file);

    .post('https://api.cloudinary.com/v1_1/' + cloud_name + '/image/upload', fd, {
        headers: {
            'Content-Type': undefined,
            'X-Requested-With': 'XMLHttpRequest'
    .success(function (cloudinaryResponse) {

        // do stuff with cloudinary response
        // cloudinaryResponse = { public_id: ..., etc. }

    .error(function (reponse) {

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download