How to allow File Uploads when using jQuery Mobile CodeUnit 16 DEC 2011

With the release of the powerful jQuery Mobile 1.0 framework, it is now becomes possible for pretty much anyone to crank out an uber slick HTML 5 website that looks like a ‘native app’ on just about any mobile device.

However, one of the things that does break on implementation is the trusty old form file upload element, the result of the nifty AJAX-driven page load system that jQuery Mobile uses. (AJAX doesn’t allow file transfers as a security feature).

Luckily for us though, there is a way to re-enable form file uploads with the only sacrifice being the slick page load, which when you think of it, isn’t such a big sacrifice now that you have the ability to launch files up to your web service once more!

In short, what we want to do is instruct the jQuery Mobile framework to not process the form submit event as an AJAX call. To do this, the following “data-ajax” element property needs to be added to your form declaration:

<form method=”POST” enctype=”multipart/form-data” action=”process_update.php” data-ajax=”false”>

Simple as that.

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.