HowTo upload images using drag & drop

Notice: This example will only work if you are using Firefox 3.6 or higher. Safari, Chrome, Opera or IE is currently not supported.

This example demonstrates, how to upload a image file from your local desktop to a webserver using drag & drop and Firefox's FileReader API to display a preview of the image.

This example is limited to upload only image files. If you want to upload any types of files you have to modify some lines of code to display a icon instead of the preview image.

View live demo
Download full source code

How does this work?

1. First of all, we need a div container, which will be our drop target:
   
   
   

   <div style="width: 600px; min-height: 300px; background: url(background.png)" id="imageDrop"></div>
   

   
   
2. This example uses Mootools as javascript framework but will also work with some changes on other javascript frameworks. You can download all needed files here. Add the following lines to your HTML Header:
   
   

   <script src="mt.js"></script>
   <script src="mt-more.js"></script>
   <script src="ImageDrop.js"></script>
   <script>
   

3. Next we need to say the ImageDrop.js script to make our new created div
   drag&dropable and define a target url where files should be posted.
   
   

   window.addEvent('domready', function() {
   var drop = new ImageDrop('imageDrop', 'post.php');
   });
   </script>

4. That's it! Now drag & drop a image from your desktop to the new created div in your browser.
   You should see a preview image which can be easily removed by clicking the (x) button in the top left corner. If you click the "upload files" button the images will be posted to my server. Notice, i will never save any of your uploaded data.
5. All the magic is done in the ImageDrop.js file. If you want to have a look behind the scenes click here. This will open the ImageDrop.js file in your browser. Have fun!