CODEWITHSUNDEEP
javascriptarraysangularjs
Aramillo
Aramillo

Reputation: 3226

how to convert html file to byte array using angularjs

I need to convert a photo into an array of bytes. I'm loading this photo with html like this:

<input class="form-control"
           type="file"
           name="filename"
           tooltip="Buscar foto"
           ng-file-select="onFileSelect($files)">

onFileSelect function saves the file in a variable of my scope. This is the code.

$scope.onFileSelect = function ($files) {
        $scope.selectedFile = $files;
    };

Now, I need to convert this file into an array of bytes, to display it as a picture later using data-ng-src =" data: image / png; base64, {{selectedFile}} " but i don't know how to do this. Any idea? Thanks

EDIT This is a picture of $files log.

enter image description here

Upvotes: 0

Views: 9251

Answers (1)

Dan Keiger
Dan Keiger

Reputation: 671

check out http://www.javascripture.com/FileReader

So, in your case you could do:

  $scope.onFileSelect = function($file){
  var reader = new FileReader();
  reader.onload = function(e){
    console.log("about to encode");
    $scope.encoded_file = btoa(e.target.result.toString());  
  };
  reader.readAsBinaryString($file);
};

Note there are several ways to read in files with the FileReader object. Great for reading as binary, text, and array buffers!

Upvotes: 1

Related Questions