Drop area component
A drop-zone which is a file selector allowing users to select file(s) from their file system, either natively or by drag and drop.
Allows to select a binary for upload, or to specify uri to external resource.
Component provides drop area functionality allowing you to just drop files within specified area.
Attributes:
- class="drop-area-sm" - prevents component from occupying whole available area
- dropped-file object of droppedFiles[] type:
droppedFiles[];
element {
file {
lastModified: 168271687167,
lastModifiedDate: Tue Nov 17 2020 08:37:11 GMT+0000,
name: "Dropped File.txt,
size: 35279,
type: "",
webkitRelativePath: ""
}
}
could be handled by following function:
onFileDropped(droppedFiles: DroppedFile[]) {
this.onFilesPicked.emit({
droppedFiles
});
}
- title - display info for user, i.e. 'Drop file or click to browse'
- maxAllowedFiles - describe how many files can be dropped once, accept only numbers
- files - type FileList, it is used to check the length of dropped array of files
- $event - object of droppedFiles[] type
Usage
Example :<div>
<c8y-drop-area
class="drop-area-sm"
(dropped)="onFileDropped($event)"
[title]="'Drop file or click to browse'"
[maxAllowedFiles]="maxAllowedFiles"
[files]="droppedFiles">
</c8y-drop-area>
</div>
<c8y-drop-area>
<h4>Put file here, it's a drop area</h4>
<c8y-drop-area>