mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
69d8ff147e
* [ADF-3323] Moved source file parsing to main doc tool * [ADF-3323] Moved source info classes * [ADF-3323] Added doc YAML generator tool * [ADF-3323] Added doc YAML/JSON source paths to gitignore * [ADF-3323] Completed templates and template context code * [ADF-3323] Added source paths and updated type linker * [ADF-3323] Final fixes to templates and type linking * [ADF-3323] Fixed filter for private and protected methods * [ADF-3323] Content services docs after check and rebuild * [ADF-3323] Updated docbuild script in package.json
79 lines
2.2 KiB
Markdown
79 lines
2.2 KiB
Markdown
---
|
|
Added: v2.0.0
|
|
Status: Active
|
|
Last reviewed: 2018-04-10
|
|
---
|
|
|
|
# File Draggable directive
|
|
|
|
Provides drag-and-drop features for an element such as a `div`.
|
|
|
|
## Basic Usage
|
|
|
|
```html
|
|
<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:
|
|
|
|
```css
|
|
.drag-and-drop-border {
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
border: double;
|
|
background-color: lightblue;
|
|
width: 400px;
|
|
height: 100px;
|
|
}
|
|
```
|
|
|
|
## Class members
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Default value | Description |
|
|
| ---- | ---- | ------------- | ----------- |
|
|
| enabled | `boolean` | true | Enables/disables drag-and-drop functionality. |
|
|
|
|
### Events
|
|
|
|
| Name | Type | Description |
|
|
| ---- | ---- | ----------- |
|
|
| filesDropped | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<File[]>` | Emitted when one or more files are dragged and dropped onto the draggable element. |
|
|
| filesEntityDropped | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | (**Deprecated:** in 2.4.0: use `filesDropped` instead. Emitted when one or more files are dragged and dropped onto the draggable element.) |
|
|
| folderEntityDropped | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when a directory is dragged and dropped onto the draggable element. |
|
|
|
|
## Details
|
|
|
|
Typically you would use the [Upload Drag Area component](../content-services/upload-drag-area.component.md) instead of this directive.
|
|
|
|
### Event handler implementations
|
|
|
|
```ts
|
|
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
|
|
|
|
- [Upload Drag Area component](../content-services/upload-drag-area.component.md)
|