File

core/drop-area/drop-area.component.ts

Description

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.

Example:

 *  <div>
 *    <c8y-drop-area
 *      (dropped)="uploadFile($event)"
 *      [icon]="'upload'">
 *    </c8y-drop-area>
 *  </div>
 *

Implements

OnInit ControlValueAccessor

Metadata

providers	`{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }`
selector	`c8y-drop-area`
templateUrl	`./drop-area.component.html`

Index

Constructor

constructor(cd: ChangeDetectorRef)

Parameters :

Name	Type	Optional
cd	`ChangeDetectorRef`	No

Inputs

accept

Specifies a filter for what file types the user can pick from the file input dialog box.

Type : string

alwaysShow

Affects displaying both the drop zone and the list of dropped files.

Default value : false

clickToOpen

Default value : true

files

Type : FileList

icon

Default value : 'plus-square'

loading

Default value : false

loadingMessage

Default value : gettext('Uploading…')

maxAllowedFiles

Default value : Infinity

message

Default value : gettext('Drop file here')

progress

Default value : -1

title

Default value : gettext('Upload file')

Outputs

dropped $event Type: EventEmitter<DroppedFile[]>

Methods

ngOnInit

ngOnInit()

Returns : void

onDelete

onDelete()

Delete files already dropped files.

Returns : void

onDrop

onDrop($event)

Handle file when it is dropped into drop-area.

Parameters :

Name	Optional
$event	No

Returns : void

onOver

onOver()

Triggered when file is on over drop area, but not dropped.

Returns : void

onPick

onPick($event)

Triggered when file is dropped.

Parameters :

Name	Optional
$event	No

Returns : void

registerOnChange

registerOnChange(fn: any)

Parameters :

Name	Type	Optional
fn	`any`	No

Returns : void

registerOnTouched

registerOnTouched(fn: any)

Parameters :

Name	Type	Optional
fn	`any`	No

Returns : void

shouldShowFilesList

shouldShowFilesList()

Checks condition what should be displayed: drop-area zone or list of dropped files.

Returns : boolean

showPicker

showPicker($event?)

Shows computer browser with files to drop into drop-area zone.

Parameters :

Name	Optional
$event	Yes

Returns : void

stopDragging

stopDragging()

Triggered when file is picked over web application.

Returns : void

toggle

toggle($event?)

Toggles the style of the drop zone element when a file is dragged over the component.

Parameters :

Name	Optional
$event	Yes

Returns : void

writeValue

writeValue(value: any)

Parameters :

Name	Type	Optional
value	`any`	No

Returns : void

Properties

area

area:     ElementRef

Type : ElementRef

Decorators :


                                @ViewChild('area', {static: undefined})

errorMessage

errorMessage:     string

Type : string

errors

errors:     boolean

Type : boolean

Default value : false

filesNameString

filesNameString:     string

Type : string

isOver

isOver:     boolean

Type : boolean

Default value : false

onChange

onChange:     function

Type : function

Default value : _ => undefined

onTouched

onTouched:     function

Type : function

Default value : () => undefined

picker

picker:     ElementRef

Type : ElementRef

Decorators :


                                @ViewChild('picker', {static: undefined})

zone

zone:     ElementRef

Type : ElementRef

Decorators :


                                @ViewChild('zone', {static: undefined})

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>

<div
  class="drop-zone"
  *ngIf="!shouldShowFilesList()"
  [ngClass]="{ 'has-errors': errors }"
  [style.pointerEvents]="loading ? 'none' : 'auto'"
  #zone
  (dragleave)="stopDragging()"
  (drop)="onDrop($event)"
  (dragover)="onOver()"
  [style.display]="isOver || alwaysShow || loading ? 'block' : 'none'"
  (click)="showPicker($event)"
>
  <div class="file-placeholder"  [ngClass]="{ 'drag-over': isOver }">
    <div *ngIf="loading" class="d-flex p-4 flex-center">
      <p class="flex-item-middle m-r-8">
        {{ loadingMessage | translate }}
      </p>
      <div class="progress progress-striped active m-0" *ngIf="progress !== -1"
          style="min-width: 50%;">
        <div
          class="progress-bar"
          role="progressbar"
          aria-valuenow="0"
          aria-valuemin="0"
          aria-valuemax="100"
          [style.width]="progress + '%'"
        ></div>
      </div>
      <div class="spinner p-relative m-0" *ngIf="progress === -1">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
    </div>

    <div *ngIf="!loading" class="hint-placeholder pointer">
      <i class="dlt-c8y-icon-{{ icon }}"></i>
      <p *ngIf="!errors">
        <b>{{ message | translate }}</b>
        <br />
        <span *ngIf="alwaysShow && clickToOpen" translate>or click to browse your computer.</span>
      </p>
      <div *ngIf="errors" class="has-errors">
        <p class="form-control-feedback-message">
          {{ errorMessage | translate }}
        </p>
      </div>
    </div>
  </div>
</div>

<div class="drop-zone" *ngIf="shouldShowFilesList()"
  [style.display]="isOver || alwaysShow || loading ? 'block' : 'none'">
  <div *ngIf="loading" class="p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center">
    <p class="m-b-8">
      <strong>
        {{ loadingMessage | translate }}
      </strong>
    </p>
    <div class="progress progress-striped active m-0" *ngIf="progress !== -1"
      style="min-width: 80%;">
      <div
        class="progress-bar"
        role="progressbar"
        aria-valuenow="0"
        aria-valuemin="0"
        aria-valuemax="100"
        [style.width]="progress + '%'"
      ></div>
    </div>
    <div class="spinner  p-relative m-0" *ngIf="progress === -1">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
  </div>
  <div *ngIf="!loading" class="file-placeholder p-4">
    <div class="flex-row p-4">
      <i c8yIcon="file-o" class="m-r-8"></i>
      <span title="{{ filesNameString }}" class="text-truncate">
        {{ filesNameString }}
      </span>
      <button
        title="{{ 'Remove' | translate }}"
        class="btn btn-clean showOnHover flex-item-right"
        >
        <i c8yIcon="minus-circle" class="text-danger" (click)="onDelete()"></i>
      </button>
    </div>
  </div>
</div>

<input
  #picker
  *ngIf="clickToOpen"
  (change)="onPick($event)"
  (click)="picker.focus()"
  (blur)="onTouched()"
  [accept]="accept"
  [multiple]="maxAllowedFiles > 1"
  type="file"
  style="opacity: 0; filter: alpha(opacity = 0); height: 0px"
/>
<div #area [hidden]="isOver || loading" (dragover)="toggle($event)">
  <ng-content></ng-content>
</div>

File

Description

Example:

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Constructor

Inputs

Outputs

Methods

Properties

Drop area component

Usage Example:

result-matching ""

No results matching ""