Upload photo with JavaScript



  • I need to take a photo and by pressing the button this photo is sent to my server so I save on my bank on base 64, I just can't take 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 take this uploaded photo convert to Buffer will help me a lot, or else some other alternative solution.



  • You must use formData in the angular service JS for this, make sure your api is prepared to receive requests in formData

    First call the FormData class of JS

    var fd = new FormData();
    

    Then vc will make a form above the fields you 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 formData with the image and the fields you send along

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




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2