A few months back I blogged about using the Picup app to grap iPhone/iPod/iPad pictures from their "i"-device to your website.
The part that has been bugging me was doing a remote upload to Imgur rather than a local upload to my server. I assume Imgur owns any image you upload to them which was a concern of mine.
So I spent some time yesterday trying to figure out my missing piece. I was relieved when I figured out that it was not my lack of brain power :) but rather the technology that I was using. I don't generally use classic ASP. I prefer ASP.NET/C# or PHP any day! With Classic ASP, you cannot easily upload files to your server by accessing the response.form. Instead, you have to download one of several 3rd party components to get the files, which then you have to register the dll blah blah blah.
However, on my server I happened to also have access to PHP. Out of frustration, I thought I will just try all my code on PHP to see if the upload will work. And it did...easily.
So to re-iterate the steps:
STEP 1. Create initial page with an input button, here is a short sample:<html> <header></header> <body class="iphone" onLoad="loadMobile();" > <form method="post" name="form1"> <input type="file" name="attach1" id="attach1"/> </body></form></html>STEP 2. Add script calls to that page.
<script type="text/javascript" src="js/picup.js"></script> <script type="text/javascript" src="js/prototype.js"></script>STEP 3. Add javascript function that sets up picup app settings. This function is loaded on the body "onLoad" see step 1. You could probably use jQuery to load this after document ready...
<SCRIPT TYPE="text/javascript">
function loadMobile(){
Picup.checkHash();
var url = escape('http://yourwebsite.com/uploadPhoto.asp');
var posturl = escape('http://yourwebsite.com/get-posted.php');
currentParams = {
'callbackURL': url, //the page called after upload.
'referrername' : escape('mywebsitename'),
'referrerfavicon' : escape('http://yourwebsite.com/images/favicon.ico'),
'purpose' : escape('Select...message to user..'),
'debug' : 'false',
'returnThumbnailDataURL': 'false',
'thumbnailSize' : '80',
'postURL': posturl, //the page that will upload the photo
'returnServerResponse':'true' //returns output of posturl
};
Picup.convertFileInput($('attach1'), currentParams);
}
</script>
STEP 4. Setup the "postURL" page, for me it is a simple PHP file. It outputs the name of the file as the response body so that my callback page can get the file name and update records accordingly.
<?php
if (isset($_FILES)){
foreach ($_FILES as $key => $file){
move_uploaded_file($file['tmp_name'], 'photos/'.$file['name']);
echo $file['name'];
}
}
?>
STEP 5. Setup the javascript on the callback page to grab the file name...and anything else that it needs.
<SCRIPT TYPE="text/javascript">
var fileName = unescape(getHashUrlVars()['serverResponse']);
var success = getHashUrlVars()['status'];
//parse hashed values from url
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;
}
....process as needed
I hope this helps.
