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>