standupweb mootools homebrews

tested on IE Tester (IE7, IE8), Opera 10.51, Firefox 3.6.2, Safari for Windows 4.0.4

SwDragndrop

download

INTRODUCTION

SwDragndrop is doing asynchronous calls to upload images.
Few changes could adapt it to upload any kind of file.

The 2 main interesting things about this plugin:
- Asynchronous upload of images without flash: I used a trick consisting in sending the request to a hidden iFrame and listen to its onLoad event. Works... except for IE6 and IE7, sorry...
- Drag'n'drop upload for people using Firefox 3.6+: Little disappointment here, seems like it is working fine if you drag until 3 files. did I do something wrong?

Those links helped me doing the job:
- http://the-stickman.com/web-development/javascript/upload-multiple-files-with-a-single-file-element
- http://www.thecssninja.com/javascript/fileapi
- http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload
- http://www.quirksmode.org/js/detect.html

FEEDBACK: Comment on post or sign up and go to the forum section: click here

EXAMPLE

Use Firefox 3.6 and above to be able to drag and drop files in the box below. If you are using another browser, use the following input field to add files

You are using

Limits:
- 2MB/file maximum (can be changed in upload.php)
- Only 3 files drag and drop simultaneously using Firefox 3.6 and above (edit in the options of the plugin). I realized it seems to get pretty unstable if you drag more files, some would fail

view all uploaded pictures

STEP BY STEP INSTRUCTIONS

1- Include a div in the body of your html:

<div id='SwDragndrop'></div>

2- CSS: Copy, paste and adapt:

div#swDragndrop { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: block; margin:12px; padding:0; width: 540px; height: 200px; background-color: #339; text-decoration: none; }
div#swDragndrop ul { list-style-type: none; margin-top:0; }
div#swDragndrop ul li { width: 220px; height: 150px; background-color: #55B; padding:12px; margin: 12px; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; float: left; }
div#swDragndrop ul li form, div#swDragndrop ul li p { margin-top: 50px; padding-top:0; font-size: 14px; }
div#swDragndrop ul li span { display: block; margin-top: 30px; }
div#swDragndrop ul li span.ajax-loader { padding-left: 25px; margin-left: 30px; text-align: left; background: url(images/ajax-loader-submit.gif) no-repeat top left; }
div#swDragndrop.dragndrop:hover { background-color: #55F; border: 2px solid #fff; }
div#swDragndrop.dragndrop { text-align:center; opacity: 0.5; border: 2px dotted #fff; left: 0; z-index: 1; }
div#swDragndrop p { color: #fff; padding-top: 30px; font-size: 25px; font-weight: bold; text-shadow: 1px 1px #000; }
div#swDragndrop.dragndrop ul li { opacity: 0.5; }
div#swDragndrop.dragndrop ul li.loaded { opacity: 1; }
div#swDragndrop.dragndrop ul li.loaded .progressBar { display: none; }
div#swDragndrop.dragndrop ul li .progressBar { margin: 5px 0 0 7px; width: 200px; height: 20px; border: 1px solid #000; -moz-border-radius: 10px; -moz-box-shadow: 1px 1px 2px #fff; }
div#swDragndrop.dragndrop ul li .progressBar p { width: 20px; height: 20px; -moz-border-radius: 10px; background-color: #1E528C; margin-top: 0; }

3- copy and include the .js files (preferably right before </body>)

<script src="lib/mootools/mootools-1.2.4-core-jm.js" type="text/javascript"></script>
<script type="text/javascript" src="js/swDragndrop.js"></script>

4- include this after the lines included in step 4

<script language="JavaScript"> window.addEvent('domready', function(){
var dd = new SwDragndrop('SwDragndrop');
});
</script>

5- copy upload.php in the same folder as your html file

6- create the folder "images/dragndrop" on the server. This is where the images will be uploaded

7- (optional): options

replace the 3 line of the script in step 5 by:
var dd = new SwDragndrop('SwDragndrop', {<OPTION>:<VALUE>, <OPTION>:<VALUE>...}});
where <OPTION> can be:

maxSize: number of MB per file (in case of file drag and drop -> Firefox 3.6 and above), default: 2

maxDropFile: number of MB per upload (in case of fallback upload -> other browsers), default: 3

url: URL where to upload the pictures, default: 'upload.php'

content: Default message to invite the user to drag and drop files, default: "Drag and drop files to upload!"

8- (optional): upload.php setup

At the beginning of the script upload.php you can change these variables:
// set this to true if you want to use the log file
$logIt = false;
// max nb of MB/file
$maxSize = 2;
// where to upload the files
$upload_dir = 'images/dragndrop';
if $logIt=true, you need to have the file Logging.php installed and then the script would log what's going on during the upload in a file that would be created in the same directory as upload.php
$maxSize should have the same value as maxSize (see point 7)

9- (optional): Log activity of the script upload.php

- copy the file Logging.php under <directory_containing_upload.php>/lib/php/
- edit upload.php and set $logIt = true as noted in point 8.