Cloudinary client-side direct upload without jQuery

Question

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 seller.

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'
  headers:
    'Access-Control-Allow-Credentials': 'true'
  file: scope.file
  data:
    upload_preset: 'seller'
$http(req)
  .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 1

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);

$http
    .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) {


    });