Dropzone.js - Open Source Drag and Drop File Uploader

Written by Kevin Liew on 07 Mar 2013
50,269 Views • Javascript

Introduction

Dropzone.js is a drag and drop file upload with image previews. The author of dropzone has made the implementation as easy as possible. We just have to declare a dropzone class in form HTML element and Dropzone will find all form elements with class dropzone and automiatically attach itself to it.

Drag and drop is a new feature for latest browser only such as IE10+, Chrome 7+, Firefox 4+, Opera 12+ and Safari 5+, for old browsers, Dropzone provides an oldschool file input fallback.

Features

  • Easy to style and update default dropzone template
  • Create a dropzone with CSS class, or programmatically using Javascript
  • Generate image thumbnails.
  • Parallel file uploads
  • With callback event for file validation and file upload status.
  • Dropzone is also available as an AMD module for RequireJS.

SPECIFICATIONS & DOWNLOAD

By Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Related Articles
easyAudioEffects.js - Add sound to any HTML Elements
Create Tooltip style Toolbars Easily with Toolbar.js
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

1 comment
Sanjeev 12 years ago
We are working on drozone.js and we have created three tutorials on dropzone js. People get issue in deleting uploaded file from servers and database in dropzone we have covered that tutorial here http://www.infotuts.com/delete-uploaded-file-dropzone-js/
Reply