0

I am developing an upload form with GSPs and would like a message to appear on the same page after an upload, to say if the upload succeeded or failed. I don't want the page to change or refresh.

I can't however manage to both stay on the page and submit the uploaded file.

Here is a sample of my gsp:

<div id="uploadDocumentMessage">

</div>

<g:uploadForm name="uploadDocument" action="uploadDocument" controller="Document">
    <g:select name="type" from="${['document1', 'document2', 'document3']}" noSelection="['':'-Choose a type of document-']" required=""/>
    <input type="file" name="file" required=""/>
    <fieldset class="buttons">
        <g:submitToRemote class="save btn btn-primary" update="uploadDocumentMessage" action="uploadDocument"
                        controller="Document" value="${message(code: 'default.upload.label', args: [''])}" />
        <input class="save" type="submit" value="${message(code: 'default.upload.label', args: [''])}"/>
    </fieldset>
</g:uploadForm>

Here is a sample of my controller:

def uploadDocument(UploadDocumentCommand command) {
    if (command == null) {
        render 'Invalid input'
        return
    }

    if (command.hasErrors()) {
        render 'You didn\'t fill all fields or the file is not a .pdf.'
        return
    }
    ...
    render 'Upload done'
}

When using the submitToRemote tag with an update attribute in the form, no page change occurs, but params.file is null in the controller, making the command validation fail.

When using the regular input html tag, the upload succeeds but a page change occurs.

How can make the form upload a file while staying on the same page and updating the uploadDocumentMessage div with some content?

Heschoon
  • 2,915
  • 9
  • 26
  • 55
  • This is a good question. To be hones I use https://www.dropzonejs.com/ to do this. It takes some time reading through the documentation to get what you want but in the end it works great. Without this, I dont think there is an elegant solution. one way would be to use an iframe and submit that iframe with the file input, but it's pretty dirty. – ionutab Sep 26 '18 at 12:43
  • read: https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload – ionutab Sep 26 '18 at 12:46

0 Answers0