How to access file uploaded by $http and HTML5 FileReader

I am trying to upload an image inside an Angular app, the code looks like this:

      var f = document.getElementById('product-image').files[0],
        r = new FileReader();
      r.onloadend = function (e) {
          var data = e.target.result;
          $http({
              method: 'POST',
              data: data,
              url: host + '/uploadFile?' + $rootScope.user._id,
              headers: {
                  'Content-Type': 'multipart/form-data',
                  'X-File-Name': f.name,
                  'X-File-Size': f.size,
                  'X-File-Type': f.type

              }
          })
            .success(function (data, status, headers, config) {
                console.log(data)
            });

      }
      r.readAsArrayBuffer(f);

When I have a look at Chrome Header fields of the request, they all look good with values.

Now, how do I access and save that file from the backend endpoint in NodeJS and Express? Do I look inside req variable as usual? Where do I look for the file and its content and meta?

basically, your post request is not 'multipart/form-data', and the data you sent to server is just binary array.

So you could just using NodeJS to save the trunk of binary data to some place.

You need to handle the data different way from normal form upload with files.

If you really want the server to handle the file upload as normal way, you could check the https://github.com/danialfarid/angular-file-upload