views:

1305

answers:

2

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.

+1  A: 

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
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?
BlackPanther
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
Thanks a lot for answers and quick response.Now problem solved.
BlackPanther
A: 

http://valums.com/ajax-upload/

nils petersohn