moxiecode/moxie

File reader fails for detached blobs

dmitrif opened this issue · 4 comments

When creating detached blobs (inferring that RUID is null), and then trying to use them with FileReader results in the following error:

Uncaught TypeError: Cannot read property 'ruid' of null

It does pass corresponding unit test here though. Can you provide more details?

Also it says 'ruid' of null not 'ruid' is null (meaning that the object that has property ruid is null for some reason), might be a hint to a solution.

Thank you for your reply, it seems that the error occurs here in Moxie.js:

Line 2859:
// check if a particular runtime was requested
if (Basic.typeOf(options) === 'string') {
    ruid = options;
} else if (Basic.typeOf(options.ruid) === 'string') {
    ruid = options.ruid;
}

Since the RUID is null, the first branch fails, meanwhile the second branch tries to access the RUID property on a null value resulting in the error.

And here is the code I am trying to run. The flow is as follows, an image gets updated through plupload and we keep a reference to the resulting PlUploadFile. We rotate it once, and add it back to the pluploader queue (uploader.addFile()), then we try to rotate the newly added image. At this point that File is a detached blob, results in the above mentioned error. Here's our code:

rotateImage: function (imageId, rotationFn) {
    var file = this.images[imageId];
    var uploader = this.pluploader;
    var imageReader = new mOxie.FileReader();

    function rotateImgUsingCanvas() {
        var canvas = document.createElement('canvas');
        var cx = canvas.getContext('2d');

        canvas.setAttribute('width', this.height);
        canvas.setAttribute('height', this.width);

        cx.save();
        rotationFn(cx, this);
        cx.drawImage(this, 0, 0);
        cx.restore();

        var rotatedImg = canvas.toDataURL("image/jpg");

        var genFile = new o.File(null, {
            data: rotatedImg,
            name: 'rotated.jpg'
        });

        uploader.addFile(genFile);
    }

    imageReader.onloadend = function () {
        var b64 = imageReader.result;

        var img = new Image();

        img.onload = function () {
            rotateImgUsingCanvas.call(this);
        };

        img.src = b64;
    };

    if (file instanceof plupload.File) {
        imageReader.readAsDataURL(file.getSource());
    } 
},

Thank you in advance!

Do you have it online somewhere?

I've created a fiddle here: http://play.plupload.com/g67J_. Had to rewrite your code a bit to make it self-sustained. I simply shortcutted the ends there and processed the same image several times over and over, feeding the final result as the source for next iteration.

Seems to run ok.