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'"
     [accept]="'.zip,.7z,video'">
   </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, filesService: FilesService, translate: TranslateService, bytes: BytesPipe)

Parameters :

Name	Type	Optional
cd	`ChangeDetectorRef`	No
filesService	`FilesService`	No
translate	`TranslateService`	No
bytes	`BytesPipe`	No

Inputs

accept

Type : string

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

Example:

Specify file types by extensions:

 ...
 [accept]="'.zip,.7z'"
 ...

Specify file types by extensions and generic types GENERIC_FILE_TYPE:

 ...
 [accept]="'.pdf,archive'"
 ...

Specify file types by generic types GENERIC_FILE_TYPE:

...
[accept]="'archive,video'"
...

alwaysShow

Type : boolean

Default value : false

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

clickToOpen

Type : boolean

Default value : true

files

Type : FileList

forceHideList

Type : boolean

Default value : false

icon

Type : string

Default value : 'plus-square'

loading

Type : boolean

Default value : false

loadingMessage

Type : any

Default value : gettext('Uploading…')

maxAllowedFiles

Type : any

Default value : Infinity

message

Type : any

Default value : gettext('Drop file here')

progress

Type : number

Default value : -1

Current progress of the upload as a percentage. If not given a spinner will be displayed.

title

Type : any

Default value : gettext('Upload file')

Outputs

dropped

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

acceptedExts

Type : string[]

area

Type : ElementRef

Decorators :


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

errorMessage

Type : string

errors

Type : boolean

Default value : false

filesNameString

Type : string

isOver

Type : boolean

Default value : false

onChange

Type : function

Default value : () => {...}

onTouched

Type : function

Default value : () => {...}

picker

Type : ElementRef

Decorators :


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

zone

Type : ElementRef

Decorators :


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

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">
      <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-snake" *ngIf="progress === -1"></div>
      <p class="flex-item-middle m-r-8">
        {{ loadingMessage | translate }}
      </p>
    </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 file system.</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]="acceptedExts"
  [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

Example:

Outputs

Methods

Properties

Drop area component

Usage Example:

results matching ""

No results matching ""