HTML and CSS Reference
In-Depth Information
attachments into Gmail from the operating system of your computer? DnD lets you do data transfer of files to Gmail's
application, but the reading of the file in your browser takes full advantage of the File API.
The DnD and File API, when used together, provide an experience identical to working with native applications
on your operating system or desktop. This new addition to HTML5 essentially allows users to treat the web application
as if it's an extension of their native operating system (OS). This can be a tremendous help if you're asking users to
upload an image of themselves into your ad unit. All they'll need do is drag it from the desktop into their browser's
defined drop zone - in our case it could be the ad.
Traditionally, the File API gave users a basic input using
<input type='file'>
that allowed for a native OS file
picker window and also allowed an HTML document to refer to a file located on the users file system—but that was
pretty much it.
Nowadays, the File API allows users to read the file in various file formats directly inside the browser, without
server-side technologies. A file can be read as a string, an array buffer, or even a BLOB (binary large object) input
using the new FileReader API. With this information native to the browser, binary information on a file can be read,
interpreted, displayed, even manipulated, and then saved in an updated and modified version. Through JavaScript,
the File API provides a native mechanism to read the data of a file and write it as you wish. As the Web becomes more
application-focused (as HTML5 intends to), the native file system of the user's computer and the application on the
web will become more interwoven. The lines between Web and native OS will be blurred for many normal everyday
users. For instance, instead of having users retrieve an asset called
someimage.jpg
saved on their machine, the File
API and FileReader API can be bolted onto the DnD API to seamlessly integrate operating system and web application
or even allow access to a user's built-in camera and capture bitmap image information and save it to the web page or
advertisement—again, all within the browser's native architecture.
This approach is much more advanced than just asking a user for a previously saved image asset, wouldn't you
say? Moreover, you can even use an
XMLHttpRequest
(AJAX) method to retrieve information from another data source
and import it as a
BLOB
,
Array
, or
String
object for the FileReader API to interpret and perhaps later ask the user to
manipulate. Using the AJAX method, this process can occur by not triggering a page refresh, which again, makes the
integration seamless to the end user.
With this in mind, lets take a look at working with the File API within JavaScript. Listing 6-2 asks the user to drag
an image of themself into the ad experience.
Listing 6-2.
File API Example
<!DOCTYPE html>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#drop_zone {
width:300px;
height: 250px;
background-color:#999;
border: 1px dashed #000;
}
p {
width: 300px;
}
</style>
<head>
<meta charset=utf-8>
<body>
<div class="percent">0%</div>
<input type=file>
