Web SDK documentation
  1. Components
  2. DropAreaComponent
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

Example

Metadata

providers DropAreaComponent
selector c8y-drop-area
standalone true
imports
C8yTranslatePipe
NgIf
templateUrl ./drop-area.component.html

Relationships

Used by

Depends on

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>
Example :
	<c8y-drop-area>
  	<h4>Put file here, it's a drop area</h4>
	<c8y-drop-area>

<div
  class="drop-zone"
  [style.pointerEvents]="loading ? 'none' : 'auto'"
  [style.display]="isOver || alwaysShow || loading ? 'block' : 'none'"
  tabindex="0"
  *ngIf="!shouldShowFilesList()"
  [ngClass]="{ 'has-errors': errors, disabled: formControl?.disabled || disabled }"
  #zone
  (dragleave)="stopDragging()"
  (drop)="onDrop($event)"
  (dragover)="onOver()"
  (click)="showPicker($event)"
>
  <div
    class="file-placeholder"
    data-cy="c8y-file-placeholder--drop-zone"
    [ngClass]="{ 'drag-over': isOver }"
  >
    <div
      class="d-flex d-col p-4 flex-center"
      *ngIf="loading"
    >
      <div
        class="progress progress-striped active m-0"
        style="min-width: 50%"
        *ngIf="progress !== -1"
      >
        <div
          class="progress-bar"
          [style.width]="progress + '%'"
          [attr.aria-label]="progress + '%'"
          aria-valuenow="0"
          aria-valuemin="0"
          aria-valuemax="100"
          role="progressbar"
        ></div>
      </div>
      <div
        class="spinner-snake"
        *ngIf="progress === -1"
      ></div>
      <p
        class="m-t-auto m-b-auto m-r-8"
        *ngIf="!hasDropAreaSmallClass"
      >
        {{ loadingMessage | translate }}
      </p>
    </div>
    <div
      class="hint-placeholder pointer"
      *ngIf="!loading"
      data-cy="drop-zone--hint-placeholder"
    >
      <i class="dlt-c8y-icon-{{ icon }}"></i>
      <p
        class="text-truncate"
        title="{{ message | translate }}"
        *ngIf="!errors"
      >
        <b>{{ message | translate }}</b>
        <br />
        <span
          *ngIf="alwaysShow && clickToOpen"
          translate
        ></span>
      </p>
      <div
        class="has-errors"
        *ngIf="errors"
      >
        <p class="form-control-feedback-message">
          {{ errorMessage | translate }}
        </p>
      </div>
    </div>
  </div>
</div>

<div
  class="drop-zone"
  [style.display]="isOver || alwaysShow || loading ? 'block' : 'none'"
  tabindex="0"
  *ngIf="shouldShowFilesList()"
>
  <div
    class="p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center"
    *ngIf="loading"
  >
    <div
      class="progress progress-striped active m-0"
      style="min-width: 80%"
      *ngIf="progress !== -1"
    >
      <div
        class="progress-bar"
        [style.width]="progress + '%'"
        [attr.aria-label]="progress + '%'"
        aria-valuenow="0"
        aria-valuemin="0"
        aria-valuemax="100"
        role="progressbar"
      ></div>
    </div>
    <div *ngIf="progress === -1">
      <c8y-loading></c8y-loading>
    </div>
    <p
      class="m-b-8"
      *ngIf="!hasDropAreaSmallClass"
    >
      <strong>
        {{ loadingMessage | translate }}
      </strong>
    </p>
  </div>
  <div
    class="file-placeholder p-4"
    *ngIf="!loading"
  >
    <div class="d-flex p-4 a-i-center">
      <i
        class="icon-20 m-r-8"
        c8yIcon="file-o"
      ></i>
      <span
        class="text-truncate"
        title="{{ filesNameString }}"
      >
        {{ filesNameString }}
      </span>
      <button
        class="btn btn-dot btn-dot--danger showOnHover m-l-auto"
        title="{{ 'Remove' | translate }}"
        [attr.aria-label]="'Remove' | translate"
        type="button"
      >
        <i
          c8yIcon="minus-circle"
          (click)="onDelete()"
        ></i>
      </button>
    </div>
  </div>
</div>
<label
  class="sr-only"
  for="file"
>
  {{ 'Select file' | translate }}
</label>
<input
  class="hidden"
  id="file"
  type="file"
  #picker
  *ngIf="clickToOpen"
  (change)="onPick($event)"
  (click)="picker.focus()"
  (blur)="onTouched()"
  [accept]="acceptedExts"
  [multiple]="maxAllowedFiles > 1"
  [disabled]="formControl?.disabled || disabled"
/>
<div
  #area
  [hidden]="isOver || loading"
  (dragover)="toggle()"
>
  <ng-content></ng-content>
</div>

results matching ""

    No results matching ""