I've been attempting to upload images to Cloudinary through my Angular controller without using any libraries. The POST requests are unsigned, and interestingly, I was successful when I tested it with jQuery on a static HTML page.
Here is the code snippet from my controller:
myapp.controller('DashboardController', ['$scope', '$http', function($scope, $http) {
$scope.uploadPicture = function() {
var formData = new FormData();
var file = document.getElementById("file").files[0];
formData.append("file", file);
formData.append("upload_preset", "[MY UNSIGNED UPLOAD PRESET]");
$http({
method: 'POST',
url: 'https://api.cloudinary.com/v1_1/[MY CLOUD NAME]/image/upload',
data: formData,
}).then(function successCallback(response) {
alert(respose.secure_url);
}, function errorCallback(response) {
console.log(response);
alert(response);
});
};
}]);
I encountered this error message:
XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/[MY CLOUD NAME]/image/upload. Origin http://localhost.com:8000 is not allowed by Access-Control-Allow-Origin.
What could be causing this error? Your assistance would be greatly appreciated. As mentioned before, the exact functionality implemented in jQuery worked flawlessly on a static HTML page named index.html, so I'm puzzled by this issue.
This is the working jQuery code:
(function() {
$('#uploadBtn').click(function() {
var formData = new FormData();
var file = document.getElementById("file").files[0];
console.log(file);
formData.append("file", file);
formData.append("upload_preset", "[MY UNSIGNED UPLOAD PRESET]");
$.ajax({
url: "https://api.cloudinary.com/v1_1/[MY CLOUD NAME]/image/upload",
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function( response ){
alert(response.secure_url);
},
error: function( jqXhr, textStatus, errorThrown ){
console.log( errorThrown );
}
});
});
})();
and
<input type="file" id="file"/>
<button id="uploadBtn">Upload</button>
All of the above code snippets were included in a static HTML file called index.html.