Extraiga un contenido de file binary en una matriz de bytes usando angularjs

Me gustaría extraer datos binarys de un file binary en una matriz de bytes. Tengo dificultades para que funcione correctamente.

Puede ver el jsFiddle aquí: https://jsfiddle.net/alexsuch/6aG4x/

El HTML:

<div ng-controller="MainCtrl" class="container"> <h1>Select text file</h1> <input type="file" on-read-file="showContent($fileContent)" /> <div ng-if="content"> <h2>File content is:</h2> <pre>{{ content }}</pre> </div> </div> 

El código Javascript:

 var myapp = angular.module('myapp', []); myapp.controller('MainCtrl', function ($scope) { $scope.showContent = function($fileContent) { $scope.content = $fileContent; }; }); myapp.directive('onReadFile', function ($parse) { return { restrict: 'A', scope: false, link: function(scope, element, attrs) { var fn = $parse(attrs.onReadFile); element.on('change', function(onChangeEvent) { var reader = new FileReader(); reader.onload = function(onLoadEvent) { scope.$apply(function() { fn(scope, {$fileContent:onLoadEvent.target.result}); }); }; reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]); }); } }; }); 

Obtengo un formatting de text corrupto como se muestra en esto: enter image description here

¿Qué estoy haciendo mal que está causando que el contenido se distorsione así?

Usted dice que desea que el contenido binary del file se envíe a través de JSON y que se almacene en mongoDB. El problema con su código es que está leyendo el file como text, cuando debería leerlo como ArrayBuffer , que no aplicará encoding de text a los valores binarys.

ArrayBuffer es genial, pero no todos los browseres admiten el envío de ArrayBuffer sobre JSON a través de XMLHttpRequest . Especialmente si conoce el formatting en el que debe estar, puede ser una buena idea convertirlo a una matriz regular. Afortunadamente, podemos usar matrices tipadas en JavaScript para ayudar.

 var myapp = angular.module('myapp', []); myapp.controller('MainCtrl', function ($scope) { $scope.showContent = function($fileContent) { $scope.content = $fileContent; }; }); myapp.directive('onReadFile', function ($parse) { return { restrict: 'A', scope: false, link: function(scope, element, attrs) { var fn = $parse(attrs.onReadFile); element.on('change', function(onChangeEvent) { var reader = new FileReader(); reader.onload = function(onLoadEvent) { var buffer = onLoadEvent.target.result; var uint8 = new Uint8Array(buffer); // Assuming the binary format should be read in unsigned 8-byte chunks // If you're on ES6 or polyfilling // var result = Array.from(uint8); // Otherwise, good old loop var result = []; for (var i = 0; i < uint8.length; i++) { result.push(uint8[i]); } // Result is an array of numbers, each number representing one byte (from 0-255) // On your backend, you can construct a buffer from an array of integers with the same uint8 format scope.$apply(function() { fn(scope, { $fileContent: result }); }); }; reader.readAsArrayBuffer((onChangeEvent.srcElement || onChangeEvent.target).files[0]); }); } }; }); 

Fiddle actualizado: https://jsfiddle.net/6aG4x/796/