javascript - AngularJS Upload a file and send it to a DB -

i've been trying ngfileupload working can upload images , have them sent db–in case mongolab db accepts json objects can posted syntax this:

$http.post('mymongoname/mydb/mycollection/mytable', {'key': 'value'}) 

fairly simple. however, i'm confused on how send images uploaded using ngfileupload db. i'm using familiar syntax introduced on ngfileupload's documentation page:

$scope.upload = function (files) {         if (files && files.length) {             (var = 0; < files.length; i++) {                 var file = files[i];                 console.log(file);              upload.upload({                 url: mymongolaburl,                 fields: {'sup': 'sup'},                 file: file                 })              }).success(function (data, status, headers, config) {                     console.log('file ' + config.file.name + 'uploaded. response: ' + data);                 });             }         }  } 

but, upon logging file object out, object:

file {} $$hashkey: "object:76" lastmodified: 1433922719000 lastmodifieddate: wed jun 10 2015 00:51:59 gmt-0700 (pdt) name: "1.png" size: 138024 type: "image/png" webkitrelativepath: "" __proto__: file  

none of which, contain actual image binary stored db. have no idea actual image being uploaded to!

it's important note not getting response server syntax—though, if image's binary use familiar $http.post method , push image db myself.

how can find uploaded image's binary, , push db? image exist, after being uploaded—and where's being uploaded to? i'm doing on localhost seems browser has read properties of image, i'm not sure how turn meaningful insight can use store image external db.

thanks help.

i ended using filereader api. specifically, reading uri blob. implemented following in custom directive. ended including lot of attrs reading allow directive used multiple times in isolated scopes on same page—but i'll leave out here. can provide entire directive if it'd helpful though—but briefly, looked this:

function create_blob(file) {     var deferred = $q.defer();     var reader = new filereader();     reader.onload = function() {             deferred.resolve(reader.result);     };     reader.readasdataurl(file);     return deferred.promise; } $scope.$watch('files', function() {     $scope.upload($scope.files); }); $scope.upload = function(files) {     $scope.loading = true;     if (files && files.length) {         (var = 0; < files.length; i++) {             var file = files[i];             var promise = create_blob(file);             promise.then(function(result) {                 var thumb = resize(result);                 upload.http({                     url: '/path',                     data: result                 })                 .progress(function (evt) {                     console.log(evt);                     var progresspercentage = parseint(100.0 * evt.loaded / evt.total);                     console.log('progress: ' + progresspercentage + '% ');                })                 .success(function (data, status,headers,config) { 

...etc.

i think you. getting blob data can confusing because when upload image can't see of it's data in scope—though rest of image's meta data show up! create_blob function should though in blob format. try doing console.log(reader.readasdataurl(file); inside function see data directly.

it took me long time figure out, , i'm not sure if best way it—if knows better, please feel free suggest! :-)