<script type="text/javascript">
    $(function() {
        $('#uploadimageBtn').click(function() {
                $('#imageInput').click();
        });

        $('#imageInput').change(function(event) {
                $('#loading-spinner').show();
                var file = $(this).val();
                var fileName = file.split("\");
                $('#uploadimageBtn-inner').html("Uploading...");
                $('#uploadForm').submit();
                event.preventDefault();
        });
    });
</script>

<div id="uploadimageBtn">
    <g:img id="loading-spinner" style="display:none;" file="loading.gif"/>
    <div id="uploadimageBtn-inner">Click to upload a file</div>
</div>

<g:form name="uploadForm" action="update" method="post" enctype="multipart/form-data">
    <div style="height: 0px;width: 0px; overflow:hidden;">
        <input id="imageInput" name="image" type="file" value="upload"/>
    </div>
</g:form>

<script type="text/javascript">
    $(function() {

        $('#fineUploaderElementId').fineUploader({
            request: {
                endpoint: "${createLink(controller:'uploadImage', action:'save', absolute : 'true')}",
                forceMultipart: true,
                inputName: 'image'
            },
            multiple: false,  // only one upload at the time
            validation: {
                allowedExtensions: ['jpeg', 'jpg', 'png','gif'],  //restricted file types
                sizeLimit: 5242880 // 5 MB
            },
            button: $('#uploadimageBtn'),
            debug: true
        }).on('complete', function(event, id, filename, responseJSON){
            if (responseJSON.success) {
                window.location = responseJSON.targetUrl;
            }
        });

    });
</script>

def save() {
    def uploadImage = new UploadImage(params)

    // Get the image file from the multi-part request
    def f = request.getFile('image')
...
}