En mi FrontEnd tengo <input id="file" ng-model="file" onchange="angular.element(this).scope().SelectedFile()" type="file" aria-label="disabled" />
y cuando elijo el archivo se ejecuta la función SelectedFile() en la cual tomo el archivo con var value = document.getElementById("file").files[0]; el cual quisiera enviar por una petición POST hacia mi servicio y tomar el archivo con HttpRequest request = HttpContext.Current.Request.Files[0];
del lado del BackEnd
1 respuesta
mira puedes implementarlo como tu prefieras:
1.- Utiliza la dependencia de un tercero para AngularJS llamada 'naif.base64'
repositorio:https://github.com/adonespitogo/angular-base64-upload
ejemplo: http://embed.plnkr.co/MTzfQASN8ZVeocAq7VcM/preview2.- o programarlo tu mismo en AngularJS con un poco de javascrip:
en tu vista:
<input type="file" style="width: 200px;" onchange="angular.element(this).scope().selectFile(this)">
en tu controlador:
$scope.fr = new FileReader();
$scope.base64 = {};
$scope.jsonRequest={};
$scope.selectFile = function(element) {
if (element.files.length === 0)
return;
$scope.fr.readAsDataURL(element.files[0]);
$scope.fr.onload = function () {
$scope.$apply(function($scope) {
$scope.base64 = $scope.fr.result;
//para sacar unicamente el base64:
$scope.jsonRequest.base64 = $scope.fr.result.split(",")[1];
//o crear el objeto json a enviar:
//{base64: "/9j/4AAQSkZJRgABAQEAYABgAAD/4RDgRXhpZgAATU0AKgAAAA…uZ3L2rf8AH5H/ANe1v/6JSijVv+PyP/r2t/8A0SlFMk//2Q==", type: "image/jpeg"}
$scope.jsonRequest.type = $scope.fr.result.split(",")[0].split(":")[1].split(';')[0];
console.log($scope.jsonRequest);
});
};
$scope.fr.onerror = function (error) {
console.error('Error: ', error);
};
}
Teniendo tu objeto json con el base64 del archivo solo faltaria hacer la petición al web service
En el backend en mi caso con nodejs uso lo siguiente:
var fs = require('fs');
if (req.body.base64!= null && req.body.base64.length != 0) {
var bitmap = new Buffer(req.body.base64, 'base64');
var url_save_img = 'img/profile/' + "aquí el nombre segun tu lógica"+ ".png";
fs.writeFileSync(url_save_img, bitmap);
}
en mi caso solo estoy guardando puras imágenes y todas .png.
Espero y te sirva saludos!