Passing JavaScript File objects between iframes

Question

I need to pass a File object to a cross domain iframe so it can be uploaded using XHR. I'm using easyXDM for cross domain communication, but the relevant point is how the browser deals with passing this object around.

fileUpload: function (data, success, error) {
    var file = data.file,
        name = data.name,
        size = data.size,
        params = data.params;

    var xhr = new XMLHttpRequest();
    xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) 
            console.log(e.loaded);
    }
    xhr.onreadystatechange = function (e) {
        if (xhr.readyState == 4)
            success();
    }

    params = params || {};
    params['qqfile'] = name;
    var queryString = qq.obj2url(params, '/api/2/photo/upload');

    xhr.open("POST", queryString, true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("X-File-Name", encodeURIComponent(name));
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.send(file);
}

The above method is called after the data is passed via the postMessage api; when it gets here, the File object, which used to look like this (printing from the Web Inspector):

File
lastModifiedDate: Mon Jul 13 2009 23:32:31 GMT-0600 (Mountain Daylight Time)
name: "Chrysanthemum.jpg"
size: 879394
type: "image/jpeg"
webkitRelativePath: ""
__proto__: File

Is now just a plain object, with no File:

Object
lastModifiedDate: "2009-07-14T05:32:31.000Z"
name: "Chrysanthemum.jpg"
size: 879394
type: "image/jpeg"
webkitRelativePath: ""
__proto__: Object

So with the File reference lost, the Xhr doesn't pass any binary data when it uploads it. How can I pass a File object to an iframe successfully?

As far as I know, you can only send strings via that mechanism. — Pointy, Apr 27 '12 at 23:41
described process in my blog post here https://alfilatov.com/posts/how-to-pass-file-into-an-iframe-and-convert-it-to-blob-for-further-ajax-request/ — Alex Filatov, Nov 07 '20 at 05:15

score 0 · Answer 1 · answered Apr 27 '12 at 23:43

0

You cannot pass File objects between windows or different origins due to browser security as its lifecycle is bound to its origin window.

Instead you can pass File data payload if needed.

answered Apr 27 '12 at 23:43

Mikko Ohtamaa

82,057
50
264
435

That's what I figured; how would I do it otherwise, then? I tried this trick with FormData, but it didn't work: – Dusda Apr 27 '12 at 23:45
http://stackoverflow.com/questions/6718664/is-it-possible-to-peform-an-asynchronous-cross-domain-file-upload – Dusda Apr 27 '12 at 23:45

Passing JavaScript File objects between iframes

1 Answers1