pushing a 'select file' button in a form in an iframe (with jquery)

Question

I use the jquery iframe plugin to squirt HTML into my iframe. Amongst other things, it contains:

<form id="update" action="dummy" method="POST" enctype="multipart/form-data">
     <div><input type="file" name="data" id="update_data"></div>
</form>

Then I run the following function. Watching the fun in the Chrome debugger, I can see that I am successfully latching onto the frame, form, and input field. But the picker does not pop up, and the form does not submit to the (JAX-RS) service.

function update_file(file) {
    var iframe = $('#new_file_iframe');
    var delform = iframe.contents().find("#update");
    var fileinput = iframe.contents().find("#update_data");
    // URLencoding?
    delform.attr("action", "/rex-ws/service/jape/update-file/" + file);
    fileinput.click();
    delform.submit();
}

Perhaps click is not the right thing to set it off?

Answer 1

This is a security issue. Browsers are notoriously stingy with what may be done to a file upload programmatically.

I'm pretty sure running fileinput.click() is out of the question for this reason.

Flash-based uploaders like Uploadify and SWFUpload have more liberties here. I think it is possible to open the file picker programmatically with them. However, using one of these uploaders would require some work.

Answer 2

I've done this in an project, I'll tell you it's a bit tricky.

What you basically have (Well at least the why I did) to do is:

• Have a input[file] in your main page
• On your upload action (ie an click event on the main page) create and iframe with a form and duplicate your input[file] and attach it to your newly created iframe form
• Submit the form in the iframe with ajaxSubmit (jQuery plugin)

If you would like I could add the code here (but it's about 120 rows).

..fredrik

Edit:

If you are designing a HTML5 site, have a look at the new input file API. https://developer.mozilla.org/en/using_files_from_web_applications