During page load a whitespace is inserted into input element value every 67 characters

Question

I have an Angularjs directive that will access the input element value during document ready event. The value is the base64 of the saved image.

app.directive('loadPhoto', function () {
    return function (scope, element, attrs) {
        //This directive 'load-photo' is required to access the DOM element inside the scope
        //This will get the Base64 string of the image which is stored in the input element
        //debugger;
        angular.element(document).ready(function () {
            scope.loadPhoto(element[0]);
        })
    }
})

Following is the function loadPhoto() to load the photo into the flow control. The function b64toBlob() is to convert Base64 to Blob:

function b64toBlob(b64Data, contentType, sliceSize) {
      contentType = contentType || '';
      sliceSize = sliceSize || 512;

      var byteCharacters = atob(b64Data);
      var byteArrays = [];

      for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
      }

      var blob = new Blob(byteArrays, {type: contentType});
      return blob;
}
        $scope.loadPhoto = function (elem) {

            //Load photo from Database
            //The photo Base64 is stored in the input element 'elem'
            //debugger;

            $scope.photosLoadingDone = false;       //Used to indicate photo is being loaded from Database.
            //console.log('$scope.loadPhoto - $scope.imageStringB64 = ', $scope.imageStringB64);
            var blobImage;
            var tmpBase64;

            //Load the photo using flow controller
            //Wait until document is ready to make sure that the input element has the Base64 string of the image
            tmpBase64 = angular.element(elem).val(); //$scope.imageStringB64;
            if (tmpBase64) {
                //Convert Base64 to Blob object
                blobImage = b64toBlob(tmpBase64, 'image/png');
                blobImage.name = "image.png";
                //Add the Blob object to flow files.
                $scope.$flow.addFile(blobImage);
            }
            /*$timeout( function () {
                //debugger;
                //tmpBase64 = $scope.imageStringB64;
                tmpBase64 = $(elem).val();
                blobImage = b64toBlob(tmpBase64, 'image/png');
                blobImage.name = "image.png";
                $scope.$flow.addFile(blobImage);
            }, 600)*/
            $scope.photosLoadingDone = true;    //Photo loading done.
        }

The above is actually working just fine, until I noticed that IE is reporting Javascript error InvalidCharacterError during page load, and the image is not loaded into the flow control. However, chrome is not reporting this error, and it is working fine. See snapshots below for more details.

During code execution of loadPhoto() directive/function, there are spaces added to the input element value element[0].value. Then, after the page is loaded, when I check the input element value using $('#additional_image1').val(), then I don't see spaces in the value, why?

It appears to me that if I remove all spaces from the value, it will solve the problem. However, I need to know why this is happening.

I would like to know if there is a way to configure the input element to prevent it from adding blank spaces during page load.

score 0 · Answer 1 · answered Nov 07 '16 at 17:16

I used b64Data.replace(/[\s]/g, '') in function b64toBlob() and the problem is solved in IE. But I am not sure why this happens in the first place.

function b64toBlob(b64Data, contentType, sliceSize) {
      contentType = contentType || '';
      sliceSize = sliceSize || 512;

      var byteCharacters = atob(b64Data.replace(/[\s]/g, ''));
      var byteArrays = [];

      for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
      }

      var blob = new Blob(byteArrays, {type: contentType});
      return blob;
}

During page load a whitespace is inserted into input element value every 67 characters

1 Answers1