I am creating a webapplication using grails which uses lot of ajax.I want to implement file upload using ajax.I dont know how to use ajax for file upload.My sample GSP code is :
<!-- code for file upload form-->
<div id="updateArea">
</div>
I tried with and .After uploading I want to update the 'updateArea' with the result.In result I am planning to show details of the uploaded file.
Uploading a file via Ajax is not really possible. You can still upload a file in the background using a hidden iframe and either evaluate the repsonse (which is then inside the iframe) or fire another ajax call after the upload is complete.
<g:form name="upload-form" action="upload" method="post" enctype="multipart/form-data" target="hidden-upload-frame">
File: <input type="file" name="myFile" />
<button type="submit">Upload</button>
</g:form>
<iframe id="hidden-upload-frame" name="hidden-upload-frame" style="display: none" onload="onUploadComplete">
</iframe>
<script type="text/javascript">
function onUploadComplete(e) {
// Handle upload complete
alert("upload complete");
// Evaluate iframe content or fire another ajax call to get the details for the previously uploaded file
}
</script>
Another option is to use a flash based uploading mechanism (eg. swfupload) instead of the iframe.