how to convert html file to byte array using angularjs

Question

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.

Dan Keiger · Accepted Answer · 2015-09-03 20:28:33Z

1

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!

answered Sep 3, 2015 at 20:28

Dan Keiger

6715 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aramillo Over a year ago

i'm getting this error: Failed to execute 'readAsBinaryString' on 'FileReader': parameter 1 is not of type 'Blob'.. I think that maybe is because the parameter is a File

Dan Keiger Over a year ago

Oh, I see. It looks like you're using a list of files. Would you mind posting the log of what $files is?

Dan Keiger Over a year ago

Yep, you're definitely in a list. We'll want to drill down to the actual file object. Try $file[0] and let me know if that works.

Aramillo Over a year ago

You're right. Using the first element of the list is working. Thanks!!

Collectives™ on Stack Overflow

how to convert html file to byte array using angularjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related