Dropzone is an excellent Javascript library for Drag and Drop file upload. It is small and easy to use. Written in 2012 by Matias Meno, its main reference can be found HERE.
With DropZone, this single line of code
<form action="upload.php" class="dropzone"> </form>creates an elegant interface area where dropped files (and directories) are sent to upload.php on the server. Dropzone works by adding extra bits of HTML required for FILEs during initialisation, like:
Dropzone can also be configured with over 50 options. Of particular interest to me was the ability to specify that large image files be reduced in size before uploading. Unfortunately, there is a frustrating problem with the documentation: complete simple examples showing how to use these goodies are either missing or difficult to find. Here I provide some useful examples.
Context:
1. Minimal Example: ( form1.html + up_1.php)
The minimal pair: files dropped onto the ZONE are placed in "uploads" with no verification
2. Complex Form with INPUTs and HIDDEN fields: ( form2.html + up_2.php )
This demonstrates that DropZone is an add-on which can be used with any typical forms. The example shows the use of INPUTs and HIDDEN fields in a DropZone form.
3. Multiple Uploads: ( form3.html + Multiple.php )
It is possible to send multiple dropped files in one call to the server, by specifying the option "uploadMultiple: true". The first two dropZones in this example show the difference with a simple Trace to "TRACE.txt". The first zone has default operation where the server is called multiple times and the second zone uses specifies "uploadMultiple:true". However, the programmer should be aware that the $_FILES data received by the server is different in each case: an array of parameters in the first case and an array of parameter arrays in the second. Our server script ( Multiple.php ) check the data and uses different code for each case.
In my opinion, use of the "uploadMultiple" option adds undue complexity. You may want to do this when adding DropZone to an existing form for multiple files and other input fields where the upload is set off via a SUBMIT button. This is covered in the GitHub DropZone documentation.
The third dropzone in the example, is a compromise. Dropped files are not sent immediately but accumulated until a SUBMIT button is pressed... then they are uploaded one by one (default behaviour). The example here uses code from the GitHub documentation. This would be the way to go if you wanted to allow the user the option of removing some files dropped by mistake before uploading. How to do this is covered in the standard documentation.
4. Resizing Images before upload: ( form4.html + upImage.php + photos.php )
This is the feature that I found most useful. The example has two DropZones: one for shrinking images and the second to generate Thumbnails by cropping. Then you can click a button to see the result. These are the options to CROP:
Dropzone.options.myDz1 = { acceptedFiles: 'image/*', resizeWidth: 100, resizeHeight: 100, resizeMethod: 'crop', dictDefaultMessage: "Images will be cropped to fit 200x300 px" }