<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')
...
}