Home arrow HTML arrow Drag and Drop in HTML5: Parsing Local Files
HTML

Drag and Drop in HTML5: Parsing Local Files


In this second part of a two-part tutorial on the Drag & Drop API in HTML5, we'll be extending the capabilities of the JavaScript application we developed in the first part. After we're done with it in this part, the application will be able to read the contents of dragged-and-dropped files and handle them in a number of interesting ways.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
October 11, 2011
TABLE OF CONTENTS:
  1. · Drag and Drop in HTML5: Parsing Local Files
  2. · The File API in action

print this article
SEARCH DEVARTICLES

Drag and Drop in HTML5: Parsing Local Files
(Page 1 of 2 )

If you think that HTML5's most engaging features are its brand new markup elements, the ability to store up to 5 MB of data in the browser, or even the flashy form attributes (just to name a few), be prepared for some exciting news. The standard now permits you to drag files from your local hard drive and drop them into the browser’s window, so that they can be processed in different and creative ways.

Moreover, this capability rests on the shoulders of two APIs, called, not surprisingly the Drag & Drop API and the File API. Sadly, not all is bright and shiny with these APIs; they’re only currently supported by a few browser vendors (with Mozilla’s guys being the leading force of the group). This shouldn’t be a big obstacle to giving the APIs a try to see if they’re actually as functional as they seem.          

With that idea in mind, in the first of this tutorial I demonstrated how to start using the Drag & Drop API. I developed a small JavaScript application, which used some event handlers to drag and drop local files to a predefined area on a web page. The entire development process was reduced to defining first the “droppable” web page section, and then creating a function that handled the target files at a very basic level.

But sincerity doesn’t hurt, right? Well, the truth is that this introductory application wasn’t very functional, as it could only count the number of files dropped into the corresponding area. Fortunately, it’s quite simple to add to the program the ability to read the contents of the selected files, and to handle them in all sorts of clever ways.

To keep things simple and easy to follow, in the lines to come I’ll be extending the current functionality of the aforementioned JavaScript application. Users will be able to drag and drop images into the browser, which will be displayed within the same droppable web page area.

Want to see how this will be done? Then start reading!

Getting started: defining a droppable section on a web page

Before I show how easy it is to read the contents of files dropped into a predefined section on a web page, we need to create the pertinent section. Below I built a basic HTML5 document, pretty similar to the one that you saw last week in the first part of this series, which does exactly that. Here it is:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 5 File API</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: normal 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 5em;
    color: #585858; 
}
h2 {
    font-size: 3em;
    text-align: center;
    color: #585858;
}
/* main wrapper */
#wrapper {
    width: 780px;
    margin: 0 auto;
}
/* file container */
#file-container {
    width: 700px;
    min-height: 500px;
    margin: 0 auto;
    background: #eee;
    border: 3px dotted #585858;
}
</style>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1>HTML 5 File API</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        </header>
        <section>
            <h2>Drop your images below...</h2>
            <div id="file-container"></div>
        </section>
        <footer>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        </footer>
    </div>
</body>
</html>

The structure of the above web page is pretty simple to grasp. It only defines the typical header and footer sections, along with an additional one identified as “file-container,” for parsing the dropped files.

Having defined the aforementioned droppable web page area, the next step is to create the JavaScript snippet responsible for processing the selected local files. Don’t get concerned, though, as the details regarding how to accomplish this will be discussed on the next page. 


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials