Upload photo with Javascript

Question

I need to take a photo and pressing the button this photo is sent to my server so I save in my database on base 64, I just can’t grab the photo and convert to Buffer. My code:

(function() {
'use strict';

angular
  .module('meetClass')
  .controller('NovaFotoController', NovaFotoController);

/** @ngInject */
function NovaFotoController($scope) {

  $scope.pular = function(){
    console.log("Pula")
  }

  $scope.cadastraFoto = function(){

  }

}
})()

Html

    <div class="divContentLogin">
    <form action="">
        <h3 style="color:#ffffff">Cadastrar Foto</h3>
        <div layout="column" style="margin-top: 10px;">
            <div class="inputsDadosLogin">
                <input mdInput type="file" id="fotoPerfil" class="colorInput" accept=".jpg, .jpeg, .png">
            </div>
        </div>
        <br>
        <md-button class="md-raised" ng-click="pular()">Pular</md-button>
        <md-button class="md-raised" ng-click="cadastraFoto()">Cadastrar</md-button>    
    </form>
</div>

If you have any way from this input to get this photo loaded convert to Buffer will help me a lot, or else some alternative solution.

Answer 1

You must use the formData in the service of the Angularjs for this, check if your api is prepared to receive requests in formData

First call the JS Formdata class

var fd = new FormData();

After you will make a form on the fields Voce will send

 for (var key in fields) {
   if (fields.hasOwnProperty(key)) {
     fd.append(key, fields[key]);

   }
 }

Then you will send to your api, the 'fd' is the complete form with the image and the fields you send together

return $http.post('routeAPI', fd, {
  transformRequest: angular.identity,
  headers: { 'Content-Type': undefined }
});