Safari iOS 6 - ajax request blob image

Question

I have a function that mainly download images in a blob object, and it's working fine on chrome, FF, iOS 7+, but not on iOS 6...

downloadImage: function( url ) {
        var that = this;
        return new Ember.RSVP.Promise(function( resolve, reject ) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url);
            xhr.onreadystatechange = function() {
                if (this.readyState === this.DONE) {
                    that.chart.incrementProgress();
                    if (this.status === 200) {
                        var blob = this.response;
                        resolve( that.imageStore.writeImage( that, url, blob ) );
                    }
                    else {
                        resolve();
                    }
                }
            };
            xhr.responseType = 'blob';
            xhr.send();

        });
    }

In iOS6 in the console debugger, when I want to see my blob object, its seems to be a string with super weird character in it.. I'm not sure if it normal or my request doesn't work properly on this version of iOS.

After that I need to convert it into a base64, so I use FileReader for that like this :

this.writeImage = function( controller, url, blob ) {
        var that = this;
        return new Ember.RSVP.Promise(function( resolve ) {
            var reader = new window.FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function() {
                var base64 = reader.result;
                var object = { id: url, key: url, base64: base64 };
                //controller.store.update('image', object).save();
                controller.store.findQuery('image', { key: url })
                .then(function( result ) {
                    var record = result.content[0];
                    record._data.base64 = base64;
                    record.save().then( resolve );
                })
                .catch(function() {
                    controller.store.createRecord('image', object).save().then( resolve );
                });
            };
        });
    };

Don't pay attention to the Promise thing and other arguments, but the blob is the same as the one in the downloadImage function.

And for a mysterious reason, the reader.loadend is never triggered because the state in reader is always at 0.

Should I do something particular for iOS6 or my code is wrong ?

[edit] : It's like the onloadend callback is not triggered ??

[edit2] : After further investigation, it seems that the response from the ajax request is a string instead of a blob... And my responseType is set as "" as well ?

Answer 1

I have found a workaround for now, I convert my binaryString into a blob like this :

function binaryStringToBlob( byteCharacters, contentType ) {
    var sliceSize = 1024;
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

You just need to get the content-type and here you go !