Drag and Drop from the Desktop to Nuxeo HTML UI has been available for a long time using a browser plugin.
Starting with Nuxeo 5.4.2, you can now use the native HTML5 Drag and Drop features on recent browsers (Firefox 3.6+, Google Chrome 9+, Safari 5+).
This new Drag and Drop import model is pluggable so you can adapt the import behavior to your custom needs.
How to use it
Selecting the DropZone
If you drag some files from the Desktop to the Nuxeo WebUI, the possible DropZones will be highlighted.
In Nuxeo DM there are 5 different DropZones (depending on the page):
- ContentView: the content listing for a folderish Document
- Clipboard_CLIPBOARD: the user's Clipboard
- Clipboard_DEFAULT: the user's Worklist
- mainBlob: the main attachment of the current Document
- otherBlobs: additional attachments of the current Document
Depending on the DropZone you select, the import action will be different:
- ContentView: create Documents from files in the current container
- Clipboard: create Documents from files in the user's personal workspaces and add them to the clipboard
- mainBlob: attach a file to the document
- otherBlobs: attach file(s) as additional files in the document
Default mode vs advanced mode
In the default mode the file you drop will be automatically uploaded and imported into the Document repository.
By using the advanced mode you can have more control over the import process:
- you can do several file imports but still keep all files part of the same batch,
- you can select the operation chain that will be executed.
To trigger the extended mode, just maintain the drag over the DropZone for more than 2.5 seconds: the drop zone will be highlighted in red indicating you are now in extended mode.
How to customize it
Defining a new DropZone
You can very simply define a new DropZone in your pages; you simply need to add an HTML element (like a div) which:
- has a unique id,
- has the 'dropzone' CSS class,
- has a context attribute.
Associating Operation Chains
Each dropzone context is associated with a set of Content Automation Operations or Operation Chains.
This association is configured via the action service:
- id is the Operation or the Operation Chain identifier
(for Operation Chains, append Chain. as a prefix for id)
- category represents the dropzone context
- filter / filter-id are the filter used to define if operation should be available in a given context
- link points to a page that can be used to collect parameters for the Operation chain
The Operation or Chain that will be called for the import will receive:
- as input: a BlobList representing the files that have been uploaded
- as context: the current page context
- as parameters: what has been collected by the form if any
The output of the chains does not really matter.
At some point, inside your Operation chain you may need to access Seam Context.
For that, new Operation where introduced:
- Seam.RunOperation: that can run an operation or a chain in the Seam context
For example, if you want to get available actions via the "Actions.GET" operation, but want to leverage seam context for actions filters:
- Seam.InitContext / Seam.DestroyContext : that can be used to initialize / destroy seam context
In some cases, you may want to user to provide some parameters via a form associated to the import operation he wants to run.
For that, you can use the the link attribute of the action used to bind your operation chain to a dropzone.
This URL will be used to display your form within an IFRAME inside the default import UI.
In the default JSF WebApp you can have a look at DndFormActionBean and dndFormCollector.xhtml.