CODEWITHSUNDEEP
phpjqueryformssymfonyupload
user1746732
user1746732

Reputation:

Upload on iframe in modal

I have a modal containing a form and an iframe. The form has a file field and post to the iframe.

The php controller return the uniqid (basically the name) of the uploaded file. The upload works well and my iframe contains the uniqid.

I would like to display this uniqid on my main page.

My issue is that I don't know how to wait the end of the upload to show the uniqid.

The form and iframe :

<form id="uploadForm" enctype="multipart/form-data" action="{{ path('lesson_upload') }}" target="uploadFrame" method="post">
    <label for="uploadFile">Document :</label>
    <input id="uploadFile" name="uploadFile" type="file" />
    <br /><br />
    <input class="btn btn-primary" id="uploadSubmit" type="submit" value="Upload" />
</form>
<div id="uploadInfos">
    <div id="uploadStatus">Aucun upload en cours</div>
    <iframe hidden id="uploadFrame" name="uploadFrame"></iframe>
</div>

The JavaScript to fill the modal with the form :

$(document).on('click', '#computer-upload', function ()
    {
        var url = Routing.generate('lesson_upload_computer');
        $.get(url, function (data)
        {
            $('#modal-various .modal-body').html(data);
            return false;
        });
        return false;
    });

The iframe at the end of an upload :

<div id="uploadInfos">
    <div id="uploadStatus">Aucun upload en cours</div>
    <iframe hidden="" id="uploadFrame" name="uploadFrame">
    #document
        <html>
            <body>
                <body>533ebac647b7e</body>
            </body>
        </html>
    </iframe>
</div>

Does anyone have an idea ?

Thanks !

Upvotes: 1

Views: 325

Answers (2)

Daniel W.
Daniel W.

Reputation: 32310

If you don't use an AJAX upload, after a little research, you cannot add an event that detects when the upload has finished.

You now have 2 options:

Fetch the id from the iframe every ~100ms and if it is not empty or null, the id will be in:

document.checkForId = function() {
    id = $('#uploadFrame').contents().find('#idInIframeDivOrOtherContainer');
    if (id) {
        window.clearInterval(intervalId);
    }

};
$(document).ready(function() {
    intervalId = window.setInterval('document.checkForId', 100);
});

When posting data, return javascript that sets the id in the main page (if you have jquery in the iframe):

<script>
$(document).ready(function() {
    $('#divInParentWindow', parent.document).text('<?php echo $id; ?>');
});
</script>

Upvotes: 1

Jonas m
Jonas m

Reputation: 2734

If your iFrame has its source on the same server/domain level as your main page. You could simply define a function at your main page

function iframeHasLoaded() {
  var body = document.getElementById('uploadFrame').contentWindow.document.body.innerHTML;
}

And, from your iFrame

window.onload=function() { parent.iframeHasLoaded() };

This should work.

Upvotes: 0

Related Questions