Drag and Drop from the Desktop to Nuxeo HTML UI has been available for a long time using a browser plugin.
You can 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 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:
- Content view: 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;
- Worklist: create documents from files in the user's personal workspaces and add them to the worklist;
- main blob: attach a file to the document;
- other blobs: 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 automation 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 green 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,
- the '
dropzone' CSS class,
- a context attribute.
Associating Automation Chains
Each dropzone context is associated with a set of content automation operations or automation chains. This association is configured via the action service:
- the operation or automation chain is configured through the action properties (since 5.7.1). The
chainIdproperty is used to configure the automation chain to execute. If not present, the
operationIdproperty is tried.
For backward compatibility, if both properties are not present, we fallback using the action
idto get the automation chain or operation to execute (for automation chains, append
chain.as a prefix for id).
categoryrepresents the dropzone context;
filter-idare the filter used to define if operation should be available in a given context;
linkpoints to a page that can be used to collect parameters for the automation 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 automation chain you may need to access Seam Context. For that, new operations were 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:
In some cases, you may want user to provide some parameters via a form associated to the import operation he wants to run. For that, you can use the
link attribute of the action used to bind your automation 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