In order to create a friendlier and more responsive user interface, we have set up the send_file process as a pipeline. First, it creates a thumbnail version of the image that is scaled to fit within the 160px by 120px image area. Then, we slice this thumbnail image and first send it to the other browser so it can be displayed while the full data is being transferred. Then, we transfer the full data:
// send selected file
function send_file(name, file_id, data) {
var default_width = 160;
var default_height = 120;
var img = document.getElementById("file_img_src");First, we set up the default width and height for the image area and select the hidden file_img_src element that we use in the first step of the thumbnail creation process.
img.onload = function() {
var image_width = this.width;
var target_width = default_width;
var image_height = this.height;
var target_height = default_height;
var top = 0;
var left...