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

<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>