JQuery file upload iframe method

Question

I'd like to set up a cross-domain file upload solution that is IE8 compatible. I've been using blueimp's JQuery File Upload plugin with the iframe transport option.

The upload works well, but I'm not able to get the results of the upload from the server side. The redirect option to a result.html file for parsing seems like the solution, but the problem is that I will not have access to the server hosting the form to deploy an HTML file. In this case, is there any other way to retrieve the results of the upload without deploying an HTML file to the origin server?

If you don't have access to the server the file is being uploaded to I don't believe there is a way to pass data back to the parent after the upload is done. The only ways I can think of this is a long poll or a Post Message from the iframe. — Adam Merrifield, Jun 23 '14 at 13:09
The file is actually being uploaded to my server, which I have access to. I don't have access to the server on which the file upload control is being rendered. Server A calls off to Server B asking for a JS file. That JS file renders a file upload control which sends the uploaded file to Server B using AJAX. I don't have access to Server A, but I do have full access to server B. — emroc, Jun 23 '14 at 13:53
Which means you also have access to the JS file that is rendering these controls? If so, yes we can do what you're asking with Post Message. Let me know that this is true before I give an actual answer. — Adam Merrifield, Jun 23 '14 at 13:57
Yes, we have access to the JS file being called. But from what I understand, PostMessage is only supported by Chrome, correct? — emroc, Jun 23 '14 at 14:22
Incorrect, PostMessage is IE8+ & basically all other browsers. [Can I Use Stats](http://caniuse.com/#search=postMessage). — Adam Merrifield, Jun 23 '14 at 15:03

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

Inside the javascript file you can add this event listener (for non-jQuery way see this answer)

$(window).on('message', function(e){
    var data = e.originalEvent.data || e.originalEvent.message;

    data = JSON.parse(data); //only if you did JSON.stringify for the data you sent
    //do what you need with the message you send.
});

Next when the upload is done you can either write this to the page or redirect the iframe to another page that has this content on it.

window.parent.postMessage('File Upload Done', '*');

If you need to send more data to the parent you need to JSON.stringify the content first (old IE and FF don't allow objects, just strings.)

window.parent.postMessage(JSON.stringify({'success': true, 'id': 1942}), '*');

edited May 23 '17 at 10:32

Community

1
1

answered Jun 23 '14 at 15:19

Adam Merrifield

10,307
4
41
58

Thanks for the details. It seems that both e.data and e.message come back as undefined for some reason. Still trying to figure out why that is. – emroc Jun 23 '14 at 17:05
@emroc sorry about that, when using jQuery you also need `originalEvent` added into the data part(you don't need this for non-jQuery way). That should work now. – Adam Merrifield Jun 23 '14 at 19:05
Thanks for the update. I got your solution working, but I still can't quite get my head around how to communicate file upload success/failure from the server back to the page. The postmessage solution works entirely in the client side. – emroc Jun 25 '14 at 20:07
@emroc So what you want to do is this. Have page with and `iframe` and a `form`. Make sure the form has `target="nameOfIframe"`. When the user submits the form it will post it to the iframe. This means the iframe will go to the url in the `action` field of the `form`. So make sure that url processes the file that is getting posted. Finally make the end of the file that processes the upload have the `window.parent.postMessage('data', '*');`. Since you're still in the same file as the upload you know if it failed or not & the data can be dynamic. Make sure the file has a valid doctype & `html`. – Adam Merrifield Jun 26 '14 at 00:57

JQuery file upload iframe method

1 Answers1