The starter kit already allowed individual file upload, and batch upload from a directory which requires files to be moved to Upload directory by FTP. The starter kit also stores the images in the database. While I prefer this method for most files, I don't prefer it for images. I changed a few methods to store the images in an images folder, and modified the image serving handler accordingly. The album page load time is a fraction of what it was with images in the database.
I also created an XP Publishing Wizard that allows any user with credentials to create/choose an album, and upload images from Windows XP. The beauty of the XPPW is that it can resize the images before uploading. That way all of us with 10 megapixel cameras no longer have to spend any extra time resizing to prevent reaching a web host storage quota.
A few articles helped me figure this stuff out:
Creating the wizard was easy enough. You first need to create a registry entry in the following format:
Windows Registry Editor Version 5.00
[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\PublishingWizard\PublishingWizard\Providers\Your Photo Gallery]
"displayname"="Your Photo Gallery"
"description"="Online Photo Albums"
"href"="http://www.yoursite.net/XPPublish.aspx"
"icon"="http://www.yoursite.net/favicon.ico"
Next is a single aspx page that accepts the files. The page handles user login, album creation/selection, and accepts multiple files in a single form post. All the hard work is done by some javascript methods that handle the XML sent from Windows XP. The javascript looks like this:
<script language='javascript'>
function startUpload()
{
var xml = window.external.Property("TransferManifest");
var files = xml.selectNodes("transfermanifest/filelist/file");
var albumId = document.getElementById("Album").value;
for (i = 0; i < files.length; i++)
{
var postTag = xml.createNode(1, "post", "");
postTag.setAttribute("href", "http://yoursite.net/XPPublish.aspx");
postTag.setAttribute("name", "userpicture");
var dataTag = xml.createNode(1, "formdata", "");
dataTag.setAttribute("name", "MAX_FILE_SIZE");
dataTag.text = "10000000";
postTag.appendChild(dataTag);
var dataTag1 = xml.createNode(1, "formdata", "");
dataTag1.setAttribute("name", "btnUpload");
dataTag1.text = "Save";
postTag.appendChild(dataTag1);
var dataTag2 = xml.createNode(1, "formdata", "");
dataTag2.setAttribute("name", "hidAlbumId");
dataTag2.text = albumId;
postTag.appendChild(dataTag2);
files.item(i).appendChild(postTag);
}
var uploadTag = xml.createNode(1, "uploadinfo", "");
uploadTag.setAttribute("friendlyname", "Family Photo Gallery");
var htmluiTag = xml.createNode(1, "htmlui", "");
htmluiTag.text = "http://yoursite.net/Personal/Albums/Photos.aspx?AlbumID=" + albumId;
uploadTag.appendChild(htmluiTag);
xml.documentElement.appendChild(uploadTag);
window.external.Property("TransferManifest") = xml;
window.external.SetWizardButtons(true,true,true);
document.getElementById("divContent").innerHtml = xml;
window.external.FinalNext();
}
function OnBack()
{
window.external.FinalBack();
window.external.SetWizardButtons(false,true,false);
}
function OnNext()
{
if (document.getElementById("divLogin"))
{
document.getElementById("LoginArea_Login1_LoginButton").click();
}
else
{
startUpload();
}
}
function OnCancel()
{
}
function window.onload()
{
window.external.SetHeaderText('Photo Gallery','Your Photos');
window.external.SetWizardButtons(true,true,false);
}
</script>
In case you haven't seen the XP Publishing Wizard in action, check out these screenshots:
