HTML and CSS Reference
In-Depth Information
// Handle drop event
document.ondrop = function(e) {
document.body.style.backgroundColor = "#fff";
try {
e.preventDefault();
handleFileDrop(e.dataTransfer.files[0]);
return false;
} catch(err) {
console.log(err);
}
}
// Provide visual feedback for the drop area
document.ondragover = function(e) {
e.preventDefault();
document.body.style.backgroundColor = "#6fff41";
}
document.ondragleave = function() {
document.body.style.backgroundColor = "#fff";
}
// Read binary file contents and send them over WebSocket
function handleFileDrop(file) {
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function() {
console.log("sending: " + file.name);
ws.send(reader.result);
}
}
</script>
Open this file in your favorite modern browser. Take a look at your browser's
JavaScript console while the WebSocket connection opens. Figure
2-1
shows the client
application running in Mozilla Firefox. Notice that, at the bottom of this figure, we've
displayed the JavaScript console, available in Firebug (a powerful web development and
