Grails g:uploadForm redirect

Question

I have ag:uploadForm that appears inside a modal dialog. After I submit ag:uploadForm, it starts to upload my file but then after that's done it tries to go to an upload.jsp and doesn't find it. What I want instead is for the modal dialog not to close once the file has finished uploading. How can I go about supressing the closing of the modal on which the form appears. I think the real question is how can I supress the browser looking for an upload.jsp once the file is uploaded. Instead I want it to stay on the modal that was used to browse and then upload the file.

Here is the upload form:

<g:uploadForm class = "uploaderForm" action="upload">
                    <div id = "fileType">
                        <p><u>File Type</u></p>
                        <label for="excelFile">Excel:</label><g:radio id = "excelFile" name="fileTypegrp" value="1" checked="true"/><br>
                        <label for="textFile">Text File(delimited):</label><g:radio id = "textFile" name="fileTypegrp" value="2" disabled="true"/><br>
                        <label for="xmlFile">XML:</label><g:radio id = "xmlfile" name="fileTypegrp" value="3" disabled="true"/>
                    </div>
                    <div id = "dataType">
                        <p><u>Data Type</u></p>
                        <label for="accData">Account Data:</label><g:radio id = "accData" name="dataTypegrp" value="1"/><br>
                        <label for="entData">Entity Data:</label><g:radio id = "entData" name="dataTypegrp" value="2"/><br>
                        <label for="indData">Individual Data:</label><g:radio id = "indData" name="dataTypegrp" value="3"/><br>
                    </div>  
                    <div id = "uploaderfield">
                        <input id = "chseFile" type="file" name="file"/><br>
                        <button id = "submFile" type="button">Upload</button>
                        <button id = "cancel1" class = "close" type="button"> Cancel </button>
                    </div>
                    <div id ="uploadErrors"><div id="progressbar"><div class="progress-label" style ="color: black;">Loading...</div></div></div>
                </g:uploadForm>

and here is the javascript for the button that submits it:

$("#submFile").click(function () {
    if ($("#chseFile").val() == "") {
        $("#uploadErrors").html("<span class='text'>You must select a file to upload.</span>");
        $("#uploadErrors").show();
        $("#uploadErrors .text").fadeOut(3000);
        }
    else if (getCheckedValue(document.getElementsByName('dataTypegrp')) == "") {
        $("#uploadErrors").html("<span class='text'>You must select a data type to upload.</span>");
        $("#uploadErrors").show();
        $("#uploadErrors .text").fadeOut(3000);
    }
    else {
        $("#progressbar").show();
        $("#progressbar").progressbar({
            value: false,
            change: function() {
                $(".progress-label").text( $("#uploadErrors").progressbar( "value" ) + "%" );
            },
            complete: function() {
                $(".progress-label").text( "Complete!" );
            }
        });
        $(".uploaderForm").submit();
}
}

Answer 1

In order to accomplish this using the g:uploadForm in a modal you will need to implement posting the form to an iframe .

This is pretty simple. Just add an iframe to your modal/page and then set the target on your form to match the name of the iframe . For example:

<g:uploadForm name="someForm" 
    controller="myController" 
    action="saveUpload 
    class="form-horizontal" 
    role="form" 
    target="hidden-upload-frame">
...
</g:uploadForm>
...
<iframe id="hidden-upload-frame" 
    name="hidden-upload-frame" 
    style="display: none;">
</iframe>

If you need the page/modal to react to the file being uploaded then the controller can render that to the iframe (eg javascript/jquery).