AJAX form submission with image upload

[Yarin]

Merry Christmas

I need to do an AJAX form submission for a basic image table. I'm
following the strategy described here:
http://web2py.com/books/default/chapter/29/11#Ajax-form-submission

whereby I create an HTML form by hand, and have a SQLForm handle the
submission. The record gets inserted fine, except that the image I
choose is not being uploaded, but a .txt file shows up in the uploads
folder instead.

Is it possible to use web2py's upload functionality with AJAX
submissions? What are my options here?

(NOTE: I need to use native jQuery ajax, not web2py ajax helpers, due
to extenuating circumstances)

The form:

<form id="image-form">
<input id="image_title" id="image_title" name="title" type="text"
value="">
<input id="image_file" name="file" type="file" />
<input type="submit" name="Submit"/>
</form>

<script>


$(function() {

$('#image-form').submit(function() {

$.update('{{=URL(c='images', f='process')}}', {
title: $('#image_title').val(),
file: $('#image_file').val(),
});
return false;
});
});
</script>

[Yarin]

Just found this in the docs, which perhaps partially answers my
question:

"*Please note:* Because Ajax post does not support multipart forms,
i.e. file uploads, upload fields will not work with the LOAD
component. You could be fooled into thinking it would work because
upload fields will function normally if POST is done from the
individual component's .load view. Instead, uploads are done
with ajax- compatible 3rd-party widgets and web2py manual upload
store commands." http://web2py.com/books/default/chapter/29/12? search=upload

 Does this mean I have to do uploads manually? I'm looking at http://
web2py.com/book/default/chapter/06#Manual-uploads but I'm not clear on
where/how I would perform this.


My table definition: db.define_table('image',         Field('title',
required=True),         Field('file', 'upload'))

[Massimo Di Pierro]

The only way around this is using this
http://jquery.malsup.com/form/

There is a web2py slice about this and an extended recipe in this
book:
http://www.packtpub.com/web2py-application-development-recipes-to-master-python-web-framework-cookbook/book

we decided not to include jquery.form.js in web2py because it is a
workaround to the specs (lack of multipart forms in ajax) and
therefore it has to be handled in a special way serverside.

massimo

[Yarin]

@Massimo, this worked for me- thanks a lot.

I'd suggest making mention of jquery.form.js in the regular book as
well.

Yarin

On Dec 25, 1:31 am, Massimo Di Pierro <massimo.dipie...@gmail.com>
wrote:
> The only way around this is using thishttp://jquery.malsup.com/form/

>
> There is a web2py slice about this and an extended recipe in this

> book:http://www.packtpub.com/web2py-application-development-recipes-to-mas...