Programatori.info » Google http://programatori.info/blog web programming blog Sun, 10 Jul 2011 07:47:18 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 How Gmail’s Drag and Drop from the Desktop Works http://programatori.info/blog/2010/09/how-gmail%e2%80%99s-drag-and-drop-from-the-desktop-works/ http://programatori.info/blog/2010/09/how-gmail%e2%80%99s-drag-and-drop-from-the-desktop-works/#comments Thu, 23 Sep 2010 11:00:06 +0000 Web Design CLuj http://ajaxian.com/?p=10242

The CSS Ninja details how Gmail's drag and drop from the desktop works; when you drag a file from the desktop into Gmail the file will automatically start uploading.

The CSS Ninja recreated the code in a demo (source code [zip]).

The code works in Firefox and Chrome. On Firefox the File API is used (detailed in another blog post) while on Chrome a different API is used.

How does Chrome work?

Using a bit of CSS trickery we can create the illusion of having File API support and still allow users to drag and drop files from the desktop into Gmail. I accomplish this by having the drop zone, which becomes visible on a dragenter event, contain an invisible file input with a 100% width and height of the drop zone area. The file input also has the attribute multiple on it allowing a user to drop multiple files.

PLAIN TEXT
HTML:
<div id="drop">
<h1>Drop files here</h1>
To add them as attachments

<input id="filesUpload" type="file" /></div>
 

The drop zone is hidden by default until a dragenter event happens on the BODY tag:

PLAIN TEXT
CSS:
#drop {
position: relative;
}
#drop input {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
 

When the drop input is activated a change event is fired and the files can be enumerated:

PLAIN TEXT
JAVASCRIPT:
dropArea.addEventListener("change", TCNDDU.handleDrop, false);

TCNDDU.handleDrop = function (evt) {
var files = evt.target.files;
dropArea.style.display = "none";
for(var i = 0, len = files.length; i &lt;len; i++) {
// iterate over file(s) and process them for uploading
}
};
 

The actual uploading is handled by XHR2:

Using XHR2 and the upload attribute to attach progress events so we can do a real progress bar that indicates to the user how much the file has uploaded.

]]> http://programatori.info/blog/2010/09/how-gmail%e2%80%99s-drag-and-drop-from-the-desktop-works/feed/ 0 Chrome Frame is out of Beta! http://programatori.info/blog/2010/09/chrome-frame-is-out-of-beta/ http://programatori.info/blog/2010/09/chrome-frame-is-out-of-beta/#comments Wed, 22 Sep 2010 19:47:32 +0000 Web Design CLuj http://ajaxian.com/?p=10361

Big news: Chrome Frame is now stable and out of beta!

Today, we’re very happy to take the Beta tag off of Google Chrome Frame and promote it to the Stable channel. This stable channel release provides our most polished version of Google Chrome Frame to date, allowing users to access modern web technologies like HTML5 on legacy browsers. You now can download the stable version of Google Chrome Frame and users of the Beta will be automatically updated to it in the days ahead. If you’re an IT administrator, we’ve also posted an MSI installer for deploying Google Chrome Frame in your network.

Chrome Frame is now much faster and stable. It's extremely simple to have a site use Chrome Frame:

PLAIN TEXT
HTML:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
 

For the next step the Chrome Frame team is focusing on making start-up speed even faster and removing the need for administrator rights when installing the plug-in.

Congrats to the Chrome Frame team!

[Disclosure: Alex Russell, the chipper-looking fellow in the video, and I have worked together at Google and on Dojo before.]

]]> http://programatori.info/blog/2010/09/chrome-frame-is-out-of-beta/feed/ 0