Use Picup App to upload image to website from iPhone

To allow iPhone image uploads on the the classic, yes, I said, classic ASP site I was working I followed the following Picup App instructions posted at:

http://www.parorrey.com/blog/php-development/resolve-mobile-safari-greyed-out-file-field-issue-in-iphone-ipod-ipad-by-using-picup-app-to-upload-images/

For the most part, the instructions worked just fine. The only item I would add is that the blog post is not very clear in stating that the iPhone user must download the free Picup App onto their phone for the code that you write to work. It is mentioned in the comments.

It is also mentioned here: http://picupapp.com/best_practices.html

However, the image is posted rather than the words of the error so googling it might be hard to find. The error that indicates the app has not been installed is a generic window that says:
"Safari cannot open the page because the address is invalid"

I did change the code to work with my asp site. I could not get the document.observe to work. I think that is what the prototype.js file is for but it was no go.

Instead I put 'hardcoded' the body tag "class=iphone" and used the onLoad to call my loadMobile() function instead of using the document.observe:

function loadMobile(){

Picup.checkHash();
var element = document.getElementById('aid');
var x;

if (typeof(element) != 'undefined' && element != null)
x = element.value;

var url = escape('http://mysite.com/uploadContactPhotoI.asp?Assigneduserid=' + x);

<!-- Set some starter params -->
currentParams = {
'callbackURL' : url,
'referrername' : escape('mysite'),
'referrerfavicon' : escape('http://mysite.com/images/favicon.ico'),
'purpose' : escape('Select your photo for the our App.'),
'debug' : 'false',
'returnThumbnailDataURL': 'true',
'thumbnailSize' : '80'
};

Picup.convertFileInput($('attach1'), currentParams);
}

And the following is the code used on the callback page go pick up the values passed back by the Picup app hash url:

<SCRIPT TYPE="text/javascript">

var allVars = getHashUrlVars();

// Get all URL parameters
var imageURL = unescape(getHashUrlVars()['remoteImageURL']);
var success = getHashUrlVars()['status'];

function getHashUrlVars(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('#') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}

function onSubmitForm(){
var startIndex = 0;

startIndex = imageURL.indexOf('.com/');
startIndex = startIndex + 5;

var fileName = imageURL.substring(startIndex);

if(success.toUpperCase() != 'COMPLETE')
alert("We were unable to complete the request to upload the image, please try again.");
else
{

document.getElementById('fname').value = fileName;
document.getElementById('rurl').value = imageURL;
document.getElementById('uploadedImg').src = imageURL;

}
}

function showImage(){

if(typeof(imageURL) != "undefined"){

if(document.getElementById('uploadedImg') != null)
{
document.getElementById('uploadedImg').src = imageURL;
document.getElementById('uploadedImg').style.display="block";
document.getElementById('uploadedImg').style.visibility="visible";
document.UpdateContactPhoto.action = "uploadContactPhotoI.asp?imageUrl=" + imageURL;
}
}
}

</script>