HTML5 Doctor » meter

Drag and Drop and Automatically Send to the Server

Remy Sharp — Tue, 03 Apr 2012 13:30:17 +0000

I realised (when looking myself) that there are a lot of demos and tutorials that show you how to drag-and-drop a file into the browser and then render it on the page. They're often labelled as "drag-and-drop and upload", but they actually don't upload. This tutorial will take you that final step.

I'll walk you through an example that you can play with: drag a file into the web page, and it'll be uploaded to the server instantly.

Tasks #

Let's break this process down into specific tasks:

Capture the drop event and read its data.
Post that binary data to the server.
Provide feedback on the progress of the upload.
Optionally render a preview of what's being uploaded and its status.

To achieve all of this, we need the following HTML5 and non-HTML5 APIs:

Keep in mind that not all browsers support all of this technology today, but they're getting close. I just wanted to create a clear and complete tutorial on how to go the whole hog and upload that dropped file.

The end result: we're able to drop the file anywhere in the browser, we get a preview and progress of the upload, and it's a slick experience.

Our drag-and-drop example page

Drag and Drop #

Just as a forewarning, drag-and-drop has been known to be a bit of a killjoy. In fact, it's a nightmare, but I won't repeat what's been said before.

Our example is going to allow you to drag-and-drop a file anywhere within the browser. To achieve that, we need to attach our event listeners to the body or documentElement (i.e., the root HTML node). By listening on the documentElement, this code could be anywhere in the page, as documentElement will always exist. You can only listen on body once the element has been encountered.

Here's the pattern of code we need to capture the drop event on the entire document:

var doc = document.documentElement;
doc.ondragover = function () { this.className = 'hover'; return false; };
doc.ondragend = function () { this.className = ''; return false; };
doc.ondrop = function (event) {
  event.preventDefault && event.preventDefault();
  this.className = '';

  // now do something with:
  var files = event.dataTransfer.files;

  return false;
};

Basic pattern for capturing drop events

I'm using the hover class so that I can toggle a tip explaining to the user that the file can be dropped on the page.

Inside the drop event, we can access the dropped files via event.dataTransfer.files.

An Alternative to Drag and Drop #

Annoyingly, as I write this, I realise this combination of API requirements is currently only met by Chrome and Firefox. So, taking the test from Modernizr, we can test for support and provide our alternative:

var dndSupported = function () {
  var div = document.createElement('div');
  return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
};

if (!dndSupported()) {
  // take alternative route
}

Testing for drag-and-drop support

Instead of drag-and-drop, we can insert a file input element (I've given it an id of "upload"), and when its value is changed, the file can be scooped in:

document.getElementById('upload').onchange = function (event) {
  // `this` refers to the element the event fired upon
  var files = this.files;
};

An alternative to native drag-and-drop

You can see the equivalent is simply the files property of the HTMLInputElement object. This will give us access to the same file as the event.dataTransfer.files from the drop event.

Automatically Uploading the File #

This is the neat bit, and it's painfully simple. We use a feature of the XHR2 spec: FormData. Once we create an instance of FormData, we can append items to it:

var formData = new FormData();
for (var i = 0; i < files.length; i++) {
  formData.append('file', files[i]);
}

// now post a new XHR request
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log('all done: ' + xhr.status);
  } else {
    console.log('Something went terribly wrong...');
  }
};

xhr.send(formData);

Creating and posting FormData

Yeah, that's it.†

† As with everything and anything, a caveat: FormData isn't in Opera (nor .next) at time of writing, but I'm sure they'll catch up.

Let's look at a couple of key things that are going on the above code.

formData.append('file', files[i]);

We're sending named parameters to our server, specifically an array of values called file. Obviously, you can call it what you want, but the file is the name your server will be looking for when it saves the uploaded file (or files).

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log('all done: ' + xhr.status);
  } else {
    console.log('Something went terribly wrong...');
  }
};

If you're familiar with XHR, you'll notice we aren't listening to onreadystatechange, only onload — which is (in effect) a convenience function to let you know when the readyState is 4 (i.e., loaded!). You should still check and respond appropriately to the status code of the request to ensure it's 200 OK, rather than a 500 (internal server error) or 404 (not found) or anything else.

xhr.send(formData);

The nice trick here is that XHR has automatically set the encoding of the posted data to multipart/form-data. This encoding allows your server to read and save the files. It's like the encoding used when you send an attachment in an email.

Providing Feedback to the User #

XHR2 now (flippin' finally) comes with a progress event. So if you're sending or retrieving a large file via XHR, you can tell the user how far along you are.

It's pretty simple. If you want to track the progress of the XHR request, listen to the progress event. One gotcha that caught me out for some time: I needed to track the progress of the upload, not the download. To do this properly, you need to listen for progress on the XHR upload object, as so:

xhr.upload.onprogress = function (event) {
  if (event.lengthComputable) {
    var complete = (event.loaded / event.total * 100 | 0);
    progress.value = progress.innerHTML = complete;
  }
};

xhr.onload = function () {
  // just in case we get stuck around 99%
  progress.value = progress.innerHTML = 100;
};

Providing feedback with XHR2's progress event

The funky | 0 syntax is bitwise shift to floor the value — for example, 2.69 becomes 2.

Note that instead of xhr.onprogress, we use xhr.upload.onprogess. When this event fires, we check that the event supports calculating the amount of data uploaded (the lengthComputable part), and then calculate the amount completed.

In my HTML, I'm using a element (similar to the element, but more semantically appropriate as we're presenting the progress of a task) to show the user how much of their file has been uploaded:

Note that I'm using innerHTML for browsers that don't yet support . Then with a dash of CSS-generated content, both the innerHTML and value of the progress can be the same (perhaps an over optimisation, but I was rather proud of myself at the time!).

And Finally, Rendering a Preview #

As a nice addition, we'll give the user a preview of what we're uploading for them. It requires the File API — specifically the FileReader API.

As the drag-and-drop operation (or the input[type=file]) contains a file object, we can hand this over to the FileReader to get the contents of the file. If it's something like an image, we can get the Base64 data and give the user a preview. Or if it's text, we could render it in a

. The MIME type for the file is available as the type property on the file object.

So let's assume we only accept images. Here's the preview part that runs after the file has been received by the browser:

var acceptedTypes = {
  'image/png': true,
  'image/jpeg': true,
  'image/gif': true
};

if (acceptedTypes[file.type] === true) {
  var reader = new FileReader();
  reader.onload = function (event) {
    var image = new Image();
    image.src = event.target.result;
    image.width = 100; // a fake resize
    document.body.appendChild(image);
  };

  reader.readAsDataURL(file);
}

Rendering a preview of an uploaded image

We create the FileReader and give it a file to read. In the above example, I've used readAsDataURL, but you can also read files in plain text and binary formats (as per the spec).

When the reader has read the file and the data is available, it fires the load event, which in turn creates our new image.

The result of the file read action is in the event.target.result property. In the case of the readAsDataURL, the value is along the lines of data:image/png;base64,ABC....

Using All the Tools in the Shed #

This example may be a little contrived for the article that I wanted to write. I've used many different technologies to do something that's a fairly common pattern on the web. In fact, it was because I had trouble finding a definitive source on uploading to the actual server (except, of course, as I wrote this article I found this example from back in late 2010!).

Hopefully, you'll see how each bit of tech can work together to create an application, but equally I hope that you can see where this would work if none or just some of the technology wasn't available. Make sure you detect functionality. Make sure you provide fallbacks. Make sure you develop responsibly.

Here's the final drag-and-drop and upload demo for you to play with.

Drag and Drop and Automatically Send to the Server originally appeared on HTML5 Doctor on April 3, 2012.

Your Questions Answered #11

Richard Clark — Fri, 30 Jul 2010 14:00:13 +0000

The clinic is busy as ever with more HTML5 ailments. This week, we’ll show you how (and whether) to store a on the server, whether to use or , more on

, the placeholder attribute, and HTML5 minification.

Getting info from a canvas to the server

Stephen asked:

I want to use a canvas element as a layout plan and allow people to move things about and the like but I then want to be able to submit the changed layout to the server so it can be kept not just as a bitmap but as the various current layout of the plan. Is this possible?

You could call canvas.toDataURL() and store this output on the server. (Note that canvas is the DOM node and not the 2D context.) This will store the current state of your canvas, but it’s effectively a bitmap at this point. If you want to store the element for later editing, I’d suggest you use SVG instead. You can achieve the same graphical effect, but you’ll have access to the actual vector data since it’s XML.

Hope that helps,

Remy

Progress or meter?

Pierre asked:

Hello doctor,

I’m beginning with HTML5. I just wonder if I’m using the progress and meter elements correctly. Just imagine a player. Is it correct to use: the progress element to specify a load bar; the meter element to specify the volume set.

Thank you Doctor, have a good day. :-)

is spot on for a loading bar, yes.

is read only, however, so it’s not appropriate for a volume control. There are some examples in Tom’s article on . To create a volume control, you could use one of the new input types specified in HTML5, perhaps .

Cheers,

Rich

Headers

Brad asked:

Having read you can use the header tag within almost any other element, is it fair to say you no longer “design” the header but simply design the elements in each header? How does that work? Would you use header classes?

In the past you define your header with an image or text etc. You can no longer do that if you use multiple headers?

The

element should be used if you have any related information within the “header” of that section that needs to be grouped. This means, for example, it isn’t necessary to wrap a lone

in a
element. Also remember that the header doesn’t have to appear at the top of a section of page.

Our articles on the
element and element explain this some more.

Whether you need to use classes depends on your site.

Ta,

Rich

The `placeholder` attribute

José asked:

I recall once having seen text inputs that had tips inside them. They didn’t need Javascript in order to manage those tips. Would you consider discussing that a little better? That’d be great! Thanks!

We’re publishing an article on forms shortly, so be sure to look out for it.

Meanwhile, you’re looking for the placeholder attribute. Currently, this is supported only on Webkit browsers, although Mozilla is also working on it. You can use placeholder like this:

We’ve also written a JavaScript solution using feature detection (i.e., it will check whether the browser supports placeholder and adds support if not). Just add this script to the end of your markup (note that it should be the end since it needs to run once the DOM is ready).

Hope that helps,

Bruce & Remy

HTML5 Minified

Grant asked:

Hello! Big fan of your website. I wanted to know about the so called “HTML Minified” feature that allows you to strip the html, head and body tags from your page.

The W3C Validator Conformance Checker for HTML5 says this is valid, but the Conformance Checker is beta and is supposedly unreliable. I haven’t heard from anywhere else that stripping these tags is a feature.

So is it really a feature? Or just a bug (A BIG one at that) in the experimental validator? I know that it works, but I would like to see any confirmation other than the validator that this is in fact an intended standard before I start using it on my websites. Thanks!

According to the spec, it is now explicitly permitted to omit all kinds of ~~elements~~ tags, including the ones you mention. Browsers are able to deduce the document structure based on context (e.g., some elements are only allowed within a element) and will fix the DOM as they go. In fact, these have always been optional tags in HTML (but not XHTML).

Browsers are so good at this, though, because they’ve had to deal with the pants code out there on the interwebs. Going this route means you’re relying on browser error handling to render your document ~~(although said error handling has admittedly been standardised in HTML5)~~. I personally see it as a more extreme version of quoting element attributes. Of course you don’t have to, but being strict makes errors much easier to find, helps out parsers that may not be as sophisticated as a full-fledged browser (like text editor syntax highlighting), and makes it easier for beginners and veterans alike to learn and use HTML.

In general, machines understand you better when you’re explicit, so I’d advise against omitting these elements.

For more detailed articles on HTML5 minification, check out Remy’s HTML5 Boilerplates and Bruce’s A minimal HTML5 document.

Peace,

Oli

Got a question for us?

That wraps up this round of questions. If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Your Questions Answered #11 originally appeared on HTML5 Doctor on July 30, 2010.

Measure up with the meter tag

Tom Leadbetter — Wed, 07 Oct 2009 13:31:41 +0000

HTML5 offers several useful new elements, to add further meaning to the markup of a page. These new elements include time, mark and here is another one, meter. It is an inline element so it can be used inside most elements, including a header or a paragraph.

What does it say in the spec?

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

When I first read about the meter tag, I immediately thought it would be useful for profile pages, such as height and weight, and maybe age, marked up in a nice definition list. However, the third line of the spec says

The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value

So there goes my idea. The emphasis of the spec definition is “a scalar measurement within a known range”. We’ll go through some sample usage now but I still think it would add useful meaning to a sportsman’s profile page for example.

Attributes

There are six attributes allowed with the meter tag: value, min, max, high, low and optimum. As we’ll mention later, the emphasis is on the author to use these correctly.

Value: This is what will be parsed out – the actual value. If you do not use the value attribute, then the first number inside the tag is the value: 2 out of 10. If a real number is not used, then the value is zero.
Min: The minimum allowed value. If there is no min attribute, then it assumes the minimum is zero. If it is not specified then the value is 0.
Max: The maximum allowed value. If the maximum value is less than the minimum value, then the minimum value is used as the max. If it is not specified then the value is 1. However, if it is possible to specify the value of this in the content – such as a percentage sign, as the maximum then will be 100%
Low: This is considered to be the low part of the value range. It must be less than or equal to the value of the high attribute. Also, if the low value is less than the min value, then the low value is the same as the min value.
High: This is considered to be the high part of the value range. If the high value is less than the low boundary, then the high value is the same as the low value. Also, if the high value is greater than the max value, then the high value is the same as the max value.
Optimum: This is considered to be the optimum value and needs to be somewhere between min and max. It can be greater than the high attribute

Let’s have a look at some examples

A voting or rating tool

Your score is:  2 out of 10

We can give this further meaning by adding min and max attributes

Your score is: 2 out of 10

Your score is: A+

Without the attributes

You do not always need to use an attribute with the meter tag. You could use

80%

Because the max value is going to be 100% (unless you always give that extra 10 :P ). You can also use fractions as the range is within itself, such as

3/4

Some real world examples

Christmas Calendar/Countdown

Christmas is in 30 days!

Notice that the title attribute can be used to specify the unit (so we can use “centimeters” or “lbs”, and so on).

Just Giving

We could also use meter on the fundraising website Justgiving.

This page, for example, would use


  Target
  £145
  Amount raised so far
  £145

Incorrect use

Empty tag

If you used

Nothing will display on your page – it is noted in the spec

The recommended way of giving the value is to include it as contents of the element

So you need to put something in the content of the tag and it doesn’t necessarily have to be a number. The spec has a good example of this

Moderate activity, Usenet, 618 subscribers
Low activity, Usenet, 22 subscribers
Low activity, Usenet, 66 subscribers

Which could be used to produce on-screen information as shown

As I noted earlier, it is incorrect to use as a weight or height, unless there is a maximum value. The spec gives this example:

The grapefruit pie had a radius of 12cm and a height of 2cm.

Instead, one would either not include the meter element, or use the meter element with a defined range to give the dimensions in context compared to other pies:

The grapefruit pie had a radius of 12cm and a height of 2cm.

Radius:: 12cm
Height:: 2cm

Whilst the above is now a correct usage of the meter tag, how do I know the max height or radius of a grapefruit? I would prefer to use a meter tag there but instead I’d probably just use a definition list to display the information.

Browser support

The meter tag works in at least the following browsers Safari 4, Firefox 3.5, Chrome 2, Opera 9.64 naturally. The following javascript is needed for IE 6, 7 and 8 (see Remy’s article about Getting HTML5 to play nicely in older browsers.

As it is an inline element, you don’t need to do anything special with the CSS.

Conclusion

If I were to use

100%

Obviously there are inconsistencies. Now, I am just being silly there but what the user will see on the screen is “100%” when the value is actually 1000. The meter tag puts the emphasis on the author to make sure that they are using this nice, new semantic tag,well, semantically and correctly.

The attributes can appear to be quite confusing but the spec is very detailed for this element. I do think they may have missed a trick by not allowing it to be used to give a stand-alone height or weight but overall I see the meter tag being used a lot in apps and on webpages, perhaps if used with javascript, it could generate live graphs and charts (though we can also use canvas for this).

Finally, I also wonder if meter allows for negative values? For example if the temperature was going to be between -10 and 5 degrees could I use meter to mark that up? I’d love to know your thoughts.

Useful Links

http://www.whatwg.org/specs/web-apps/current-work/#the-meter-element

Measure up with the meter tag originally appeared on HTML5 Doctor on October 7, 2009.

HTML5 Doctor » meter

Drag and Drop and Automatically Send to the Server

Tasks #

Drag and Drop #

An Alternative to Drag and Drop #

Automatically Uploading the File #

Providing Feedback to the User #

And Finally, Rendering a Preview #

Using All the Tools in the Shed #

Related Posts:

Your Questions Answered #11

Getting info from a canvas to the server

Progress or meter?

Headers

in a
element. Also remember that the header doesn’t have to appear at the top of a section of page.

Our articles on the
element and element explain this some more.

Whether you need to use classes depends on your site.

Ta,

Rich

The `placeholder` attribute

HTML5 Minified

Got a question for us?

Related Posts:

Measure up with the meter tag

What does it say in the spec?

Attributes

Let’s have a look at some examples

A voting or rating tool

Without the attributes

Some real world examples

Christmas Calendar/Countdown

Just Giving

Incorrect use

Empty tag

Browser support

Conclusion

Useful Links

Related Posts: