dynamically create an iframe, attach a form with input type file, trigger the browse and auto-submit the form

StackOverflow https://stackoverflow.com/questions/13217445

Question

I'm trying to achieve ajax-like-file-upload-using-hidden-iframe. Obviously there are many plugins available for that purpose, but I think my requirements are a bit different. So I'm trying to achieve it as follows:

HTML: 

    <!DOCTYPE>
    <html> 
    <style>
        .file_upload{cursor:pointer;color:blue;text-decoration:underline;}
    </style>
    <body>
        <div class="file_upload" id="upload1" name="doc1" >Upload doc1</div>
        <div class="file_upload" id="upload2" name="doc2" >Upload doc2</div>
        <div id="iframe_div"></div>
    </body>
    </html>

JQUERY: 

$(document).ready(function(){
                $(".file_upload").click(function(event){
                    var itr = $(".file_upload").length;
                    var iframeName = $(this).attr('name') + itr;
                    var iframeId = $(this).attr('id') + itr;
                    $('<iframe />', {
                        name: iframeName,
                        id: iframeId,
                        src: 'about:blank'
                    }).appendTo('#iframe_div');
                    //append form to body of the iframe
                    $('<form>',{
                        name: iframeName + '_form',
                        id: iframeId + '_form',
                        action: 'actionName.action',
                        method: 'POST',
                        enctype: 'multipart/form-data'
                    }).appendTo('#' + iframeId).find('body');
                    //append file input
                    //trigger 'click' using $('#file_fld_id').trigger('click')
                    //browse to file and use 'onchange' to trigger
                                      auto-submit of  the form
                    //replace the 'file-upload' div with a progress bar...
                   //remove the iframe when upload is complete
                });
            });

In Short:

1. Open browse window onclick of a div.

2. Upload the file using hidden iframe.

But I think I'm too knowledgeable(in jquery) to achieve this. Or is it really possible?? If so please help/redirect/anything.....how come this obvious functionality has to be implemented with work-arounds(flash,obex,silverlight,....)..ahhh.

EDIT(to clarify a bit):

As I mentioned 'my iframe is dynamic'...the reason is that my file inputs are supposed to be inside an already existing form with a separate action(struts2). I've got yet another action for file upload. As we can't have form inside a form, so what I'm trying is to use a div inside my existing form for file uploading with the other action. And I've got different docs to be uploaded separately within this form. So basically I'm trying to replace each div(one being used for file upload) with a separate iframe having its own form(but same action would handle the upload) which will get auto-submitted the moment user clicks 'open' while browsing the file. I hope I'm clearer now.

Was it helpful?

Solution

Ok, here the sample.It may not work on all browsers, I just checked on chrome 22, it will not work with different domain (same origin policy)

HTML:

<div id="hello">You will be asked to submit a file</div>
<div id="temp">
<iframe>
 
</iframe>
</div>
<button id="SelectFile">Select File</button>
<div id="filedialog">
    <form method="POST" action="/test.php" >
   <input type="file">
    </form>
</div>
​

CSS

#temp ,#filedialog{
 display:none;   
}

js:

var frame = $('#temp iframe');
var frameinit = function() {
    frame.contents().find('body').children().remove();
    frame.contents().find('body').append($('#filedialog').html());
    frame.contents().find('input').change(function() {
        frame.contents().find('form').submit();
    });
};
frameinit();
$('#SelectFile').click(

function() {
    frame.contents().find('input').click();
    frame.load(function() {
        //JSfiddle's error message from iframe
        var data = frame.contents().find('.pageHeader');
        $('body').append($('<div>').html(data));
        frameinit();
    });
});​
​

please note that you can't trigger click on file dialog without real browser click.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top