5.16.2

Drag and Drop

Note

If you want the contents of any drop zone to be invisible until an item enters the drop zone, simply ensure a qq-hide-dropzone attribute is present on the drop zone container.

Fine Uploader's UI mode has drag & drop support built in. The following contains information about the standalone support. Here, you can find instructions that will allow you to easily integrate Fine Uploader's standalone drag & drop module into your project if you are using Fine Uploader's core mode only. For more information about the integrated support, see the options and methods in the side nav bar of this page.

Note

If using the integrated drag & drop feature of Fine Uploader UI, a qqDropTarget property is added to all File objects dropped into any drop zone. The value of this property points to the actual drop zone element.

Drag and Drop Standalone Module

If you are integrating Fine Uploader and utilizing core mode, you are likely building you own UI entirely. In case you want to support drag and drop of folders and files, you probably don't want to re-invent the wheel, since Fine Uploader already has code to handle this in Fine Uploader mode. Fine Uploader's drag & drop code has been moved into a standalone module, so it can be easily integrated into your Fine Uploader Core mode app (or even any non-Fine Uploader app). This following will explain how to utilize this module.

Note

This module is aimed at Fine Uploader Core mode integrators only. If you are running this in UI mode, then take a look at the dragAndDrop Fine Uploader UI option.

Options

allowMultipleItems

Set to false if you want to prevent the user from dropping more than one item at once.

Type:
boolean
Default Value:
true

dropZoneElements

Specify all container elements that should be treated as drop zones.

Type:
Array
Default Value:
[ ]

classes

dropActive

Specify a CSS class to apply to drop zone(s) when a file has entered it.

Type:
String
Default Value:
''

Events

processingDroppedFiles

Invoked when the module has started processing the set of dropped files.

processingDroppedFilesComplete

Invoked when the module has finished processing.

Parameters:
Array
files

An array of processed files. Note that a qqPath property will be added to each File object that was dropped as part of a directory drop. The value of this property will be the path of the file starting with the dropped top-level directory.


HTMLElement
dropTarget

The target where this event originated from.


dropError

Called when processing the drop fails for any reason.

Parameters:
String
errorCode

The specific error code


String
errorRelatedData

Data related to the error.


dropLog

Invoked when a message is logged.

Parameters:
String
message

The message to log.


dragEnter

Invoked when dragged element enters drop zone.

dragLeave

Invoked when dragged element leaves drop zone.

Methods

dispose

Tears down all drop zones associated with the dnd instance.


setupExtraDropzone

Call this to add an additional drop zone to the DnD instance. Not available if using the jQuery plug-in wrapper.

Parameters:
HTMLElement
element

THe HTMLElement where the dropzone will be rendered inside of.


removeDropzone

Call this to remove a drop zone from the DnD instance. Not available if using the jQuery plug-in wrapper.

Parameters:
HTMLElement
element

THe HTMLElement where the dropzone will be remove from.


Simple Example

var dragAndDropModule = new qq.DragAndDrop({
        dropZoneElements: [document.getElementById('myDropZone')],
        classes: {
          dropActive: "cssClassToAddToDropZoneOnEnter"
        },
        callbacks: {
          processingDroppedFiles: function() {
            //TODO: display some sort of a "processing" or spinner graphic
          },
          processingDroppedFilesComplete: function(files, dropTarget) {
            //TODO: hide spinner/processing graphic

            fineUploaderBasicInstance.addFiles(files); //this submits the dropped files to Fine Uploader
          }
        }
      }),

    fineUploaderBasicInstance = new qq.FineUploaderBasic({
    request: {
        endpoint: "server/uploadHandler"
    }
  });