The first thing I did was build a complete demo using their example of a file upload. I began by creating a simple HTML file:
For the most part this is just what the Parse docs have, but as a complete file, hopefully it is helpful. I can confirm this worked perfectly. In the result object I got a URL to the picture I uploaded. Of course, if I did not pick an image this wouldn’t work. You do have access to the file name so in theory line 14 could easily be made dynamic.
Ok, I felt bad. The fix was one line:
var name = file.name;
In the zip I’ll be sharing this is corrected. So – that would work in PhoneGap if your mobile client allows for file upload fields. I’m not sure which do. I know iOS lets you capture the camera with one, but I’m not sure if I remember if it lets you select files too. As I said, I’m in a rush.
Again – I assume this is all pretty simple, but if it doesn’t make sense, let me know. I specified the photo library as I was testing on the iOS simulator.
Woot. So it works. But – I’ve heard that using base64 for image data in PhoneGap can be a bit memory intensive. Parse supports a binary array too so I built another demo that made use of “real” files as well. That turned out to be a bit more difficult.
First – PhoneGap can save a camera image to the file system. That part is easy. But the File API is not the most… simple thing to use. The PhoneGap API returns a File URI that you have to turn into a File object that you then have to send to a File Reader. Finally you can get an array buffer object but Parse needs a real array instead. (And for that part I need to thank Si Robertson for his help on G+.)
Here is the code I used. It isn’t pretty. But it works.
Anyway – this is very cool and just makes the Parse/PhoneGap combination even cooler. I’ve attached a copy of my code with my app IDs stripped out. Enjoy!