Welcome to the Alfresco Builder Network

Provides drag-and-drop features for an element such as a div.

Basic Usage

<div [file-draggable]="true" id="DragAndDropBorder" class="drag-and-drop-border"
     (filesDropped)="onFilesDropped($event)"
     (folderEntityDropped)="onFolderEntityDropped($event)"
     dropzone="" webkitdropzone="*" #dragAndDropArea>
  <ng-content></ng-content>
  Drag and Drop files here!
</div>

Some sample CSS to show the drag and drop area:

.drag-and-drop-border {
  vertical-align: middle;
  text-align: center;
  border: double;
  background-color: lightblue;
  width: 400px;
  height: 100px;
}

Class members

Properties

NameTypeDefault valueDescription
enabledbooleantrueEnables/disables drag-and-drop functionality.

Events

NameTypeDescription
filesDroppedEventEmitter<File[]>Emitted when one or more files are dragged and dropped onto the draggable element.
folderEntityDroppedEventEmitter<any>Emitted when a directory is dragged and dropped onto the draggable element.

Details

Typically you would use the Upload Drag Area component instead of this directive.

Event handler implementations

export class SomeComponent implements OnInit {

 onFilesDropped(files: File[]): void {
    if (files.length) {
      // Use for example the uploadService to upload files to ACS
      console.log('# of files dropped: ', files.length);
    }
  }

  onFolderEntityDropped(folder: any): void {
    if (folder.isDirectory) {
      // Use for example the uploadService to upload folder content to ACS
      console.log('Folder dropped: ', folder);
    }
  }

See also

Interested in trying Alfresco?

Try Now