CODEWITHSUNDEEP
javascripthtmlangularjs
José Araújo
José Araújo

Reputation: 53

FileReader onload only works the second time around in browsers

I'm working on in-browser image processing with HTML5 and have a weird issue in Chrome with the onload event handler for the File API FileReader class the file is only processed properly the second time it's selected in the form.

Any idea how I can get Chrome to process this event the first time around? In my console network when i click edit image don't appear nothing when i click the second time in edit button appear me the profilePic with the image blob. IDK what happen.

Code:

function uploadFile(){
    var file = $scope.profilePic;
    console.log(file);
    var blob = new Blob([file], {
        "type": "text/html"
    });

    var reader = new FileReader();

    reader.onload = function(e) {
        var text = e.target.result.split(',')[1];
        console.log(text);
        $scope.loadedUser.profilePic = text;
    }

    reader.readAsDataURL(blob);
};

html:

<div layout-gt-sm="row" style="margin-bottom: 20px;">                                                    
    <input type="file" name="profilePic" fileread="profilePic"> 
</div>

Upvotes: 3

Views: 1836

Answers (2)

Majid Rafei
Majid Rafei

Reputation: 87

I had the same issue with <object> tag and blob file.

I got data of the file from server and make a blob file of it and tried to show it in a modal using <object> tag. Every thing did well until I added a loading icon and hence a loading flag (or variable). I utilized ng-if to handle <object> tag with this loading flag. This caused <object> tag not loading correctly. Since then, file was not showed for the first time I opened the modal, but was showed correctly when I opened the modal for the second time, I didn't get the file from server for the second time and hence no loading (no loading for the second time because file was already in access).

To overcome this problem, I tried and changed many things with no success. $scope.$apply() didn't work for me. Then I changed the flag ng-if to ng-show, by this way the <object> loaded for the first time correctly and hence file was showed too.

Upvotes: 0

georgeawg
georgeawg

Reputation: 48948

The quick fix is to use $scope.$apply:

reader.onload = function(e) {
    var text = e.target.result.split(',')[1];
    console.log(text);
    $scope.loadedUser.profilePic = text;
    //USE $apply
    $scope.$apply();
}

The reader.onload event is a browser event which occurs outside the AngularJS framework. Any changes to the AngularJS scope need to be processed with an AngularJS digest cycle which is started with $scope.$apply().


(source: angularjs.org)

-- AngularJS Developer Guide (v1.1.5) - Concepts - Runtime

Upvotes: 2

Related Questions