6

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.

Jay Prall
  • 5,295
  • 5
  • 49
  • 79
DonX
  • 16,093
  • 21
  • 75
  • 120

2 Answers2

3

http://grails.org/plugin/ajax-uploader

Ethan Gastie
  • 31
  • 2
3

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.

Siegfried Puchbauer
  • 6,539
  • 34
  • 24
  • Hi Siegfried Puchbauer.I tried your answer.But iframe is not working in mozilla firefox and IE browsers.I tried with google chrome browser.It is working.How to make this work in IE and firefox? – DonX Mar 16 '09 at 02:22
  • Hi. Sorry, this was a typo. Normally you have to define the name attribute of the iframe, not the id attribute as I unintentionally did. Cheers – Siegfried Puchbauer Mar 16 '09 at 10:05
  • Thanks a lot for answers and quick response.Now problem solved. – DonX Mar 16 '09 at 16:18