Drag and Drop Articles
-
Interview with Sebastian Dorn, winner of the Drag and Drop Dev Derby
Sebastian Dorn won the Drag and Drop Dev Derby with Pete’s Adventure, his wonderful web-based interactive story. Recently, I had the chance to learn more about Seba: his work, his ambitions, and his thoughts on the future of web development. The interview How did you become interested in web development? I think it was around […]
-
Announcing the winners of the January 2013 Dev Derby!
This past January, creative web developers from around the world showed us what they could do with drag and drop interaction in the January Dev Derby contest. After looking through the entries, our three new expert judges–Craig Cook, Franck Lecollinet, and Guillaume Lecollinet–decided on four winners and two runners-up. Not a contestant? There are other […]
-
The shortest image uploader – ever!
A couple of line of JavaScript. That’s all you need. This is a very short Image Uploader, based on imgur.com API. If you want to do more complex stuff (like resize, crop, drawing, colors, …) see my previous post. Back-story. I’ve been talking to Imgur.com‘s owner (Hi Alan!). He recently added Drag’n Drop support to […]
-
How to develop a HTML5 Image Uploader
HTML5 comes with a set of really awesome APIs. If you combine these APIs with the <canvas> element, you could create a super/modern/awesome Image Uploader. This article shows you how. All these tips work well in Firefox 4. I also describe some alternative ways to make sure it works on Webkit-based browsers. Most of these […]
-
HTML5 adoption stories: box.net and html5 drag and drop
This is a guest post from Tomas Barreto, a developer who works at box.net. They recently adopted HTML5 drag and drop as a way to share files with other people using new features in Firefox. The included video is a pitch for the feature and service, but shows how easy it is to do simple […]
-
an HTML5 offline image editor and uploader application
Many web applications use image uploaders: image hosting websites, blog publishing applications, social networks, among many others. Such uploaders have limitations: you can’t upload more than one file at a time and you can’t edit the image before sending it. A plugin is the usual workaround for uploading more than one image, and image modifications […]
-
interactive file uploads with Drag and Drop, FileAPI and XMLHttpRequest
In previous posts, we showed how to access a file through the input tag or through the Drag and Drop mechanism. In both cases, you can use XMLHttpRequest to upload the files and follow the upload progress. Demo If you’re running the latest beta of Firefox 3.6, check out our file upload demo. Uploading XMLHttpRequest […]
-
file drag and drop in Firefox 3.6
In a previous post, we showed you how to upload several files using the input element. In Firefox 3.6, you can let your users drag and drop files directly into your web page, without going through the file picker. Demo If you’re running the latest Firefox 3.6 beta, check out our interactive demo of drag […]
-
W3C FileAPI in Firefox 3.6
Often, web applications will prompt the user to select a file, typically to upload to a server. Unless the web application makes use of a plugin, file selection occurs through an HTML input element, of the sort <input type="file"/>. Firefox 3.6 now supports much of the W3C File API, which specifies the ability to asynchronously […]
-
font_dragr: a drag and drop preview tool for fonts
This demo is from our good friend Ryan Seddon who came up with a demo that seems deeply appropriate for this week, given our focus on the future of fonts on the web. If you’ve ever been editing a page and wanted to know what a particular font looked like without having to upload files […]
