Data URL? How to display an inline image

I recently wrote code to work with the Picup App. One of the parms returned by the app is thumbnailDataUrl. I had no idea what it was and had not heard of it. It looked this in the query string (shortened):

thumbnailDataURL=data:image/png;base64,xxjkjfdskfjksfjlksdjfklsjdfklsjflkjdflkksjfklsdjfksdjfl

At first I was so concerned with figuring out how to use the Picup to grab images that I did not pay attention to this piece until today.

I learned from this article that is a URL Data Scheme. And it is soooo easy to use, just throw it into the src value of an image tag!
<img src="data:image/png;base64,xxjkjfdskfjksfjlksdjfklsjdfklsjflkjdflkksjfklsdjfksdjfl" />
Love it!

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>

WordPress WP-Ecommerce, Modify or Remove Sidebar

I needed to modify the product page display to be better displayed. The product page did not have a side menu, but the div tag 'sidebar' still existed taking up about 180px worth of space which threw the layout off. I searched for a way to get rid of the space, but found there was not an acceptable solution since the Theme was forcing it to be there and I did not really feel like digging around in the code to find it.

It took me awhile to think of this solution and I am not sure why and I never saw anyone post this solution and IT IS SIMPLE! Modify the css on the 'wpsc-single_product.php' page. I am not a senior word press person so I don't know if all wp wp-ecommerce pages have this page but whatever page you are dealing with add this css to override the stylesheet and make the sidebar 0px:

#columnleft
{
float:left;
width:0px;
}

#columnright
{
float:right;
width:870px;
padding:1px;
}

#sidebar
{
width: 0px;
}