Module: alfresco/documentlibrary/_AlfDndDocumentUploadMixin

alfresco/documentlibrary/_AlfDndDocumentUploadMixin

This mixin provides functions that allow files to be uploaded by dragging and dropping them onto the widget. It also provides functions that control highlighting the widget when files are dragged over the widget.

NOTE: Highlighting of items provided by this module is not supported for any version of Internet Explorer prior to version 10

Author:
  • Dave Draper
Copyright:
  • Copyright (C) 2005-2020 Alfresco Software Limited
License:
Source:

Extends

Mixes In

Members

_removeHighlightEvent :string

This is a custom event that is emitted when the drag-and-drop upload highlight is applied to the node and results in any outer elements removing any previously applied highlight. This ensures that only one highlight is displayed at a time.
Type:
  • string
Since:
  • 1.0.58
Default Value:
  • "ALF_REMOVE_DND_UPLOAD_HIGHLIGHT"
Source:

cssRequirements :object[]

An array of the CSS files to use with this widget.
Type:
  • object[]
Since:
  • 1.0.41
Default Value:
  • [{cssFile:"./css/_AlfDndDocumentUploadMixin.css"}]
Source:

dndMaxFileLimit :integer

Maximum number of files to allow to be published from a single drag operation. As for some user-agents drag and drop of potentialy large nested folder structures may be supported - this limit will halt the publish of the file list if it is larger than the supplied value and throw an error. Specify zero to indicate no limit - which is the default setting to maintain backward compatibility.
Type:
  • integer
Since:
  • 1.0.59
Default Value:
  • 0
Source:

dndUploadCapable :boolean

Indicates whether or not the browser is capable of drag and drop file upload. This is set in the constructor.
Type:
  • boolean
Default Value:
  • false
Source:

dndUploadEnabled :boolean

Indicates whether drag and drop is enabled.
Type:
  • boolean
Default Value:
  • false
Source:

dndUploadEventHandlers :object[]

Type:
  • object[]
Default Value:
  • null
Source:

dndUploadHighlightDebounceTime :number

This is the length of time (in milliseconds) that the highlight will be displayed on the screen without the mouse moving over any element within the element on which the highlight can be applied. This exists so that if the drag moves out of the browser without leaving the element (i.e. if it is moved onto an overlapping window) the highlight will not remain displayed forever.
Type:
  • number
Since:
  • 1.0.42
Default Value:
  • 2500
Source:

dndUploadHighlightImage :string

The image to use for the upload highlighting. Currently the only other option apart from the default is "elipse-cross.png"
Type:
  • string
Since:
  • 1.0.41
Default Value:
  • "large-folder-icon.png"
Source:

dndUploadHighlightText :string

The text to display for upload highlighting. If configured or overridden to be null or the empty string then no text will be displayed.
Type:
  • string
Since:
  • 1.0.41
Default Value:
  • "dnd.upload.highlight.label"
Source:

dndUploadHighlightTimeout :number

This is used as a reference for a timeout handle that will remove the highlight if the mouse does not move over an element within the element that the upload highlight can be applied to.
Type:
  • number
Since:
  • 1.0.42
Default Value:
  • null
Source:

dragAndDropNode :object

Keeps track of the DOM node that the drag-and-drop events are listened on.
Type:
  • object
Default Value:
  • null
Source:

dragAndDropOverlayNode :element

Type:
  • element
Since:
  • 1.0.41
Default Value:
  • null
Source:

i18nRequirements :object[]

An array of the i18n files to use with this widget.
Type:
  • object[]
Since:
  • 1.0.41
Default Value:
  • [{i18nFile: "./i18n/_AlfDndDocumentUploadMixin.properties"}]
Source:

suppressDndUploading :boolean

Indicates whether or not the mixing module should take advantage of the drag-and-drop uploading capabilities. This makes it possible to "opt-out" through configuration or extension.
Type:
  • boolean
Since:
  • 1.0.39
Default Value:
  • false
Source:

widgetsForUpdate :array

This defines the form controls to include in an update version dialog that is displayed whenever a user attempts to drag and drop a new version onto an existing node.
Type:
  • array
Source:

Methods

addDndHighlight()

This should be overridden to add highlighting when an item is dragged over the target.
Source:

addDndUploadHandlers()

Sets up the handlers for the drag and drop events. These handlers are all added to the dndUploadEventHandlers array so that they can be easily cleaned up by removeDndUploadHandlers
Since:
  • 1.0.41
Source:

addUploadDragAndDrop(domNode)

Adds HTML5 drag and drop listeners to the supplied DOM node
Parameters:
Name Type Description
domNode object The DOM node to add drag and drop listeners to
Source:

checkApplicable(domNode, currentFunctionName)

This function is used to check that the event to be handled relates directly to the current widget. This check is needed because it is possible that a widget that handles drag and drop could be a child of another widget that handles drag and drop. It returns true if the supplied DOM node belongs to the current widget (e.g. "this") and that the widget has the same function. This isn't a perfect solution as there is a possibility that another widget could have an identical function name but this should be unlikely. It would have been preferable to use the "isInstanceOf" function, but that would require a reference to the class that this function is being declared as part of! As long as the function stops the event then this should not be necessary.
Parameters:
Name Type Description
domNode object The DOM node that the event has occurred on
currentFunctionName string The name of the function being processed
Source:
Returns:
true if the current function should be executed

constructor()

Determines whether or not the browser supports drag and drop file upload.
Source:

findScrollParent() → {element}

This function recursively searches out through the DOM to find the first parent of the supplied element that is capable of scrolling vertically and has scrollbars displayed.
Since:
  • 1.0.60
Source:
Returns:
The DOM element that is the scroll parent with scroll bars displayed
Type
element

getUploadConfig() → {object}

This function makes a best guess at constructing upload configuration, but it can be overridden if required or if the attempt at configuration construction is not appropriate. When overriding the function should return an object with the following attributes: - uploadDirectoryName - destination (optional - required if siteId, containerId and uploadDirectory are not provided) - siteId (optional - required if destination is not provide) - containerId (optional - required if destination is not provide) - uploadDirectory (optional - required if destination is not provide)
Source:
Returns:
Type
object

hasUploadPermissions()

This function is used to check whether the currentItem supports upload for the permissions held by the current user. By default this assumes that the currentItem is a Node that defines all the relevant permissions. It looks to see whether the Node is a container that the user can create a children on or is not a container that the user can write to.
Source:

onCurrentNodeChange(payload)

Handles changes to the current node that is represented by the widget that mixes in this module. For example when the path that a view is displaying changes.
Parameters:
Name Type Description
payload object The published payload
Source:

onDndUploadDragEnter(e)

Parameters:
Name Type Description
e object HTML5 drag and drop event
Source:

onDndUploadDragOver(e)

It's important that the drag over event is handled and that "preventDefault" is called on it. If this is not done then the "drop" event will not be processed.
Parameters:
Name Type Description
e object HTML5 drag and drop event
Source:

onDndUploadDrop(evt)

Fired when an object is dropped onto the DocumentList DOM element. Checks that files are present for upload, determines the target (either the current document list or a specific folder rendered in the document list and then calls on the DNDUpload singleton component to perform the upload.
Parameters:
Name Type Description
evt object HTML5 drag and drop event
Source:
Fires:

onFileUploadComplete()

This function is called once the document upload is complete. It publishes a request to reload the current document list data.
Source:

onFilterChange(payload)

Handles changes the current filter. If the filter isn't path based then drag and drop uploading is disabled.
Parameters:
Name Type Description
payload object The published payload
Source:

publishUpdateRequest(uploadConfig)

This function publishes an update version request. It will request that a new dialog be displayed containing the form controls defined in widgetsForUpdate.
Parameters:
Name Type Description
uploadConfig object
Source:
Fires:
  • event:ALF_CREATE_FORM_DIALOG_REQUEST

removeDndHighlight()

This should be overridden to remove highlighting when an item is dragged out of the target
Source:

removeDndUploadHandlers()

Clean up any previously created event handlers stored in the dndUploadEventHandlers array.
Since:
  • 1.0.41
Source:

removeUploadDragAndDrop(domNode)

Removes HTML5 drag and drop listeners from the supplied DOM node
Parameters:
Name Type Description
domNode object The DOM node to remove drag and drop capabilities from
Source:

setDndHighlightDimensions(targetNode)

This sets the position and dimensions of the dragAndDropOverlayNode
Parameters:
Name Type Argument Description
targetNode object <optional>
 An optional node to use instead of the dragAndDropNode
Since:
  • 1.0.42
Source:

subscribeToCurrentNodeChanges()

Adds subscriptions to topics providing information on the changes to the current node being represented. This has been primarily added to support widgets that change the displayed view.
Source:

swallowDragEnter(e)

Fired when an object is dragged onto any node in the document body (unless the node has been explicitly overridden to invoke another function). Swallows the event.
Parameters:
Name Type Description
e object HTML5 drag and drop event
Source:

swallowDragOver(e)

Fired when an object is dragged over any node in the document body (unless the node has been explicitly overridden to invoke another function). Updates the drag behaviour to indicate that drops are not allowed and then swallows the event.
Parameters:
Name Type Description
e object HTML5 drag and drop event
Source:

swallowDragStart(e)

Fired when an object starts getting dragged. The event is swallowed because we only want to allow drag and drop events that begin outside the browser window (e.g. for files). This prevents users attempting to drag and drop the document and folder images as if they could re-arrange the document lib structure.
Parameters:
Name Type Description
e object HTML5 drag and drop event
Source:

swallowDrop(e)

Fired when an object is dropped onto any node in the document body (unless the node has been explicitly overridden to invoke another function). Swallows the event to prevent default browser behaviour (i.e. attempting to open the file).
Parameters:
Name Type Description
e object HTML5 drag and drop event
Source: