Chaining Services
This code sample demonstrates a couple key ideas. First, we show how ImageAlter and FileTransfer may be combined in a chain to allow you to upload client modified images. The bigger idea demonstrated here is how the "file" type in BrowserPlus allows services to be combined in different ways.
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | <html>
<head><title>Uploading Thumbnails</title>
<style type="text/css" media="screen">
#dropArea { width: 200px; height:200px; border: 1px solid #999; }
</style>
</head>
<body>
<p>
<div id="dropNotes"> loading ... </div>
<div id="dropArea"> <img id="droppedThumbnail" src="/i/ffffff.gif"> </div>
File Name: <span id="lastDropInfo"> ... </span> <br>
Client MD5: <span id="clientMD5"> ... </span> <br>
Server MD5: <span id="serverMD5"> ... </span>
</p>
</body>
<script src="/js/browserplus.js"></script>
<script>
// a convenience function to alter the content of the "dropNotes" div
// to give user feedback
function setDropAreaTitle(txt) {
var div = document.getElementById("dropNotes");
while (div.firstChild) {div.removeChild(div.firstChild);}
div.appendChild(document.createTextNode(txt));
}
// a function that will be invoked when the user is hovering over
// the drop target.
function hovering(hoverOn) {
if (hoverOn) {setDropAreaTitle("drop it!");}
else {setDropAreaTitle("drag another image to the box below");}
}
// a function invoked when the user drops content matching the
// mime-types specified in AddDropTarget below
function dropped(arg) {
var textArea = document.getElementById("lastDropContents");
var txt = arg[0].name;
// set summary text
lds = document.getElementById("lastDropInfo");
while (lds.firstChild) lds.removeChild(lds.firstChild);
lds.innerHTML = txt;
// We've got a drop that contains the specified mime types (an image),
// let's route that image through the ImageAlter service to generate
// a thumbnail
BrowserPlus.ImageAlter.Alter({
file: arg[0],
maxwidth: 200,
maxheight: 200,
quality: "low"
}, function (r) {
if (!r.success) {
alert('image alter failed');
} else {
// We successfully scaled the image!
// first, let's render a preview for the user
BrowserPlus.FileAccess.GetURL(
{ file: r.value.file },
function (r) {
if (r.success) {
var tn = document.getElementById("droppedThumbnail");
tn.src = r.value;
}
});
// next, let's automatically start an upload
BrowserPlus.FileTransfer.upload(
{
files: { thumbnail: r.value.file },
url: "/misc/calculate_md5.php"
},
function (r) {
if (r.success) {
var md5 = document.getElementById("serverMD5");
md5.innerHTML = r.value.body;
} else {
alert("Upload Failed: " + r.error + (r.verboseError ? ", " + r.verboseError : ""));
}
});
// finally, let's calculate the MD5 sum of the file on the client
BrowserPlus.FileChecksum.md5(
{ file: r.value.file },
function (r) {
if (r.success) {
var md5 = document.getElementById("clientMD5");
md5.innerHTML = r.value;
}
});
}
});
}
BrowserPlus.init(function(res) {
if (res.success) {
BrowserPlus.require({
services: [
{service: 'DragAndDrop', version: "1"},
{service: 'ImageAlter', version: "2"},
{service: 'FileTransfer', version: "1"},
{service: 'FileAccess', version: "1" },
{service: 'FileChecksum', version: "1" }
]},
function(res) {
if (res.success) {
var dnd = BrowserPlus.DragAndDrop;
dnd.AddDropTarget(
{
id: "dropArea",
mimeTypes: [ "image/png", "image/jpeg", "image/gif" ]
},
function(res) {
dnd.AttachCallbacks({
id: "dropArea",
hover: hovering,
drop: dropped
},
function(){});
setDropAreaTitle("drag an image to the box below.");
});
} else {
alert("Error Loading DragAndDrop: " + res.error);
}
});
} else {
alert("Failed to initialize BrowserPlus: " + res.error);
}
});
</script>
</html> |
| Run Example | |
ImageAlter version 2.0.0 and above returns a temporary session scoped "file". This file can then be passed into FileAccess to generate a in-page preview, it can be passed into FileTransfer to upload the contents, and it can be passed into FileChecksum to calculate an MD5 of the contents on the client.
A final element of this demonstration is the server code to receive the upload. Given the expressiveness of PHP, it's actually quite simple:
header("Content-type: text/plain");
echo md5(file_get_contents($_FILES['thumbnail']['tmp_name']));
As you can see, the server php code simply calculates the md5 sum of the uploaded content and returns it in the body of the response.
