Upload photo with JavaScript

Question

Upload photo with JavaScript

Navigation

#1 by (0 votes)

0

I need to take a photo and when I press the button this photo is sent to my server so I save it to my bank on base 64, I just can not get 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 to get this input from this input, this loaded photo convert to Buffer will help me a lot, or some other workaround.

javascript html angularjs node.js

asked by anonymous 18.11.2017 / 03:52

1 answer

update on laravel Model Entity Relationship Dynamic form

score 0 · Answer 1

You should use formData in angularJS service for this, make sure your api is ready to receive requests in formData

First call the JS FormData class

var fd = new FormData();

Then you will make a form above the fields that you will send

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

   }
 }

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

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