Follow this tutorial for a simple solution, works charm..
http://prasanthco.de/tutorials/cloudinary-image-upload-using-angularjs/
Do this.
Index.html - include the files in the same order..
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.1/lodash.min.js"></script>
<script src="https://github.com/cloudinary/pkg-cloudinary-core/blob/master/cloudinary-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.11/ng-file-upload-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script src="https://github.com/cloudinary/cloudinary_angular/blob/master/js/angular.cloudinary.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.11/ng-file-upload.min.js"></script>
app.js - Inject the modules
var app = angular.module('myApp', [
'cloudinary',
'ngFileUpload'
]);
home.html - any view where you need the image upload option
<div class="container" ng-hide="loader">
<div class="deal">
<label class="black bold">Upload an Image</label>
<br>
<div id="direct_upload"
ngf-drop="uploadFiles($files)"
ngf-drag-over-class="dragOverClass($event)"
ng-model="files"
ng-multiple="true">
<form>
<div class="form_line">
<div class="form_controls">
<div class="upload_button_holder">
<div href="#" class="button" style="width:150px;" ngf-select="uploadFiles($files)" multiple title="upload" resetOnClick="true" >Upload</div>
</div>
</div>
<br>
</div>
</form>
</div>
<br>
</div>
home.s - Appropriate Controller
app.controller('homeController', ['$scope','$http', 'Upload', 'cloudinary', function ($scope, $http, $upload, cloudinary) {
var cloud_name = "your cloud name";
var api_key = "your api_key";
var public_id = "your public_id";
var signature = "your signature";
var timestamp = "your timestamp";
$scope.uploadFiles = function(files){
if(!files){
return false;
}
angular.forEach(files, function(file){
if (file && !file.$error) {
file.upload = $upload.upload({
url: "https://api.cloudinary.com/v1_1/" + cloud_name + "/upload",
data: {
timestamp: timestamp,
public_id: public_id,
api_key: api_key,
signature: signature,
file: file
}
}).progress(function (e) {
file.progress = Math.round((e.loaded * 100.0) / e.total);
file.status = "Uploading... " + file.progress + "%";
}).success(function (data) {
console.log('success');
console.log(data);
alert('success');
}).error(function (data) {
console.log('failed');
console.log(data);
alert('failed');
});
}
});
};
}]);
Hope this helps :)