We often need to upload a file without refreshing page or even before user submits the complete form.<\/p>\n
We have been using flash uploaders or i-frames to achieve that. However now it is possible to upload a file using only ajax and javascript.<\/p>\n
The first thing we need is a HTML form that will allow the user to select the file that they wish to upload. Lets create a form with file type in it<\/p>\n
In grails, we prefer to use g:form tag<\/p>\n
[java]
\n<g:form name="myForm">
\n <div>
\n <label for="name">
\n <strong>Name<\/strong>
\n <\/label>
\n <input id="name" name="name" type="text"\/>
\n <\/div>
\n <input type="file" name="inputFile">
\n<\/g:form>
\n[\/java]<\/p>\n
We can even use a normal form tag:<\/p>\n
[java]
\n<form method="post" enctype="multipart\/form-data">
\n <div>
\n <label for="name">
\n <strong>Name<\/strong>
\n <\/label>
\n <input id="name" name="name" type="text"\/>
\n <\/div>
\n <input type="file" id="inputFile" name="inputFile">
\n<\/form><\/p>\n
[\/java]<\/p>\n
Now lets include jQuery form plugin which will provide us functionality to upload files using ajax<\/p>\n
Now all we need to do is call ajaxSubmit method, which is provided by jQuery form plugin Cheers!<\/p>\n Mansi Arora<\/p>\n mansi[at]intelligrape[dot]com<\/p>\n","protected":false},"excerpt":{"rendered":" We often need to upload a file without refreshing page or even before user submits the complete form. We have been using flash uploaders or i-frames to achieve that. However now it is possible to upload a file using only ajax and javascript. The first thing we need is a HTML form that will allow […]<\/p>\n","protected":false},"author":79,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2,"footnotes":""},"categories":[7],"tags":[96,71,4840,55,1465],"class_list":["post-14601","post","type-post","status-publish","format-standard","hentry","category-grails","tag-ajax","tag-file-upload","tag-grails","tag-javascript","tag-jquery-form-js"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
\nwith options.
\n[java]
\n<script type="text\/javascript">
\n $(‘form’).ajaxSubmit({
\n async: true,
\n url: myCustomUrl,
\n success : function(){
\n ….. \/\/ Add your success handler code here
\n }
\n<\/script>
\n[\/java]
\nI also created a demo app<\/a>, showing this behaviour. Feel free to check it out. <\/p>\n