Extract contents of binary in byte array using angularjs

Question

I would like to extract binary data from a binary file into an array of bytes. It’s hard for me to make it work properly.

Here you can see jsFiddle: https://jsfiddle.net/alexsuch/6aG4x/

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> 

Javascript Code:

 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]); }); } }; }); 

I get a damaged text format as shown in the image:

What am I doing wrong that causes the content to distort in this way?

Answer 1

You say you want the binary content of the file to be sent via JSON and storage in mongoDB. The problem with your code is that you read the file as text, when you have to read it as an ArrayBuffer , which will not apply text encoding to binary values.

ArrayBuffer great, but not all browsers will support sending ArrayBuffer via JSON via XMLHttpRequest . Especially if you know the format it should be in, it might be a good idea to convert it to a regular array. Fortunately, we can use typed arrays in JavaScript to help with this.

 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]); }); } }; }); 

Updated script: https://jsfiddle.net/6aG4x/796/