AngularJS Download the file and send it to the database

Question

I am trying to get ngFileUpload so that I can upload images and send them to the DB - in my case a mongoLab that accepts JSON objects that can be POST ed with syntax similar to this:

 $http.post('myMongoName/myDb/myCollection/myTable', {'key': 'value'}) 

Pretty simple. However, I am confused about how to send images uploaded using ngFileUpload to the DB. I use the familiar syntax provided on the ngFileUpload documentation page:

 $scope.upload = function (files) { if (files && files.length) { for (var i = 0; i < 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 after registering the file object, I get the 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 them contain the actual binary file, which can be stored in the database. I basically have no idea where the actual image actually loads!

It is also important to note that I am not receiving a response from the server with this syntax, although if I could get the binary image file, I could just use the familiar $http.post method and paste the image into the database myself.

How to find the binary file of the downloaded image and paste it into the database? Where does the image exist after downloading it - and where does it even load? I do all this on localhost , so it seems like the browser has read all the properties of the image, but I'm not sure how to turn this into a meaningful understanding that I can use to store the image in my external database.

Thanks for any help.

Answer 1

I ended up using the FileReader API . In particular, reading a URI as a blob . In the user directive, I implemented something like the following. In the end, I included a lot of attrs readings that allowed the directive to be used several times in isolated areas on one page, but I will leave it here. I can provide you with the whole directive if it were useful, although, but in a nutshell, it looked something like 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) { for (var i = 0; i < 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 this will do for you. Getting blob data can be confusing because when you upload an image, you cannot see any of its data in the area, although the rest of the metadata will be displayed! This create_blob function should get it for you, although in blob format. Try to do console.log(reader.readAsDataURL(file); inside this function to see the data directly.

It took me a long time to understand, and I'm not sure if this is the best way to do this - if anyone knows better, please feel free to suggest! :-)