grails ajax file upload in a g:form

Question

I have a form which is in a modal window, as part of this form I have a file upload.

I am struggling to find a way to upload in the

 <g:form>

via Ajax. I know I can use uploadForm, but this refreshes the page which is not what I want.

I have tried all the ajax file upload grails plugins with no luck.

Can anyone point me to some sort of way I can do this.

What I have tried so for is as follows:

    <g:form action="save">

           <g:textField name="category" value=""/>

                  <g:uploadForm name="myUpload">
                         <input type="file" name="myFile" />
                  </g:uploadForm>

           <g:submitButton name="create"value="create" />


     </g:form>

     <g:javascript>
           $(document).ready(function() {
                 $('#myUpload').ajaxForm(function() {
                 alert("File upload finished!");
                 });
            });
     </g:javascript>

The alert never get triggered. I have added the relevant JS files.

Answer 1

You can ajaxify your upload form using the jquery ajax form plugin .

If you want to submit everything in your form in one go via ajax, you can do something like this:

<g:uploadForm name="myUpload" action="save">
    <g:textField name="category" value=""/>
    <input type="file" name="myFile" />
    <g:submitButton name="create"value="create" />
</g:uploadForm>

<script> 
    $(document).ready(function() { 
        $('#myUpload').ajaxForm(function() { 
            alert("File upload finished!"); 
        }); 
    }); 
</script>