Upload image to server by HTML FIleUpload on Android

Question

I'm trying to develop a mobile application for some site, that using HTML form for data transfer. Currently I'm developing for Android, but this app should be also on iOS and WP7 (that's why I've chosen PhoneGap).

The form I'm using has <input type="file"> tag and I should pass image itself through it because I haven't access to the server part.

What I've tried:

1. To use <input type="file"> tag as it was on form but it doesn't open filepicker dialog.

2. To use PhoneGap methods for getting image in base64 format and attach it to the form parameters but server doesn't recognize them as a valid file. For accomplishing this I'm using next function:

    function fileUpload (url, fileData, fileName) { var fileSize = fileData.length, boundary = "12352134", xhr = new XMLHttpRequest(); xhr.open("POST", url, true); // simulate a file MIME POST request. xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); xhr.setRequestHeader("Content-Length", fileSize); var body = "--" + boundary + "\\r\\n"; body += 'Content-Disposition: form-data; name="imagen"; filename="' + fileName + '"\\r\\n'; body += "Content-Type: image/jpeg\\r\\n\\r\\n"; body += fileData + "\\r\\n"; body += "--" + boundary + "--"; xhr.send(body); return true; 

   }

I can't use Ajax for passing just an image because I don't have access to form and all data must be integral.

Answer 1

input[type=file] will not work consistently across all devices. iOS devices below version 6 won't support it at all. However, PhoneGap does give you access to the file system. You can provide another way of choosing a file. See the FileSystem docs: http://docs.phonegap.com/en/2.1.0/cordova_file_file.md.html#File

These does also discuss the FileTransfer object. This would let you upload a file.