core/file-picker-form-control/file-picker-form-control.component.ts

Description

File uploader

Implements

OnInit AfterViewInit ControlValueAccessor Validator

Example

Metadata

providers	`)` `)`
selector	`c8y-file-picker-form-control`
standalone	`true`
imports	`FormGroupComponent` `NgIf` `IconDirective` `MessagesComponent` `NgFor` `MessageDirective` `LoadingComponent` `ExtractArrayValidationErrorsPipe` `FilterNonArrayValidationErrorsPipe` `HumanizeValidationMessagePipe` `AsyncPipe` `KeyValuePipe` `C8yTranslatePipe` `BytesPipe` `GenericFileIconPipe`
templateUrl	`./file-picker-form-control.component.html`

Relationships

Used by

Depends on

FormGroupComponent
NgIf
IconDirective
MessagesComponent
NgFor
MessageDirective
LoadingComponent
ExtractArrayValidationErrorsPipe
FilterNonArrayValidationErrorsPipe
HumanizeValidationMessagePipe
AsyncPipe
KeyValuePipe
C8yTranslatePipe
BytesPipe
GenericFileIconPipe
)
OnInit
AfterViewInit
ControlValueAccessor
Validator

File picker form control

Allows to select a binary for upload. Component provides drop area functionality allowing you to just drop files within specified area. Attributes:

maxAllowedFiles maximum number of total files to be selected
minRequiredFiles minimum number of total files to be selected
accept type of files allowed for upload
disableValidators disable specific validators
dropped function callback to be invoked upon drop action
uploadInProgress boolean flag indicating whenever there is upload ongoing
uploadProgress the array of progress state objects for each selected file
validateExtensionOnDrag turn on/off validation on file drag event

Usage Example:

Example :

<div>
	<c8y-file-picker-form-control
		#filePicker
		[formControl]="control"
		[uploadInProgress]="isLoading"
		(dropped)="onFileDroppedEvent($event)"
		[uploadProgress]="uploadProgress"
	></c8y-file-picker-form-control>
</div>

<c8y-form-group class="m-0">
  <div
    class="file-picker-drop-zone"
    [class.dragging]="isDropAreaEnlarged$ | async"
    tabindex="0"
  >
    <div
      class="file-placeholder pointer"
      [class.drag-over]="isDraggingOverFilePlaceholder$ | async"
      #filePlaceholder
      (drop)="onDrop($event)"
      (click)="!uploadInProgress && picker.click()"
    >
      <div *ngIf="validateExtensionOnDrag && (isDraggedFileUnsupported$ | async); else defaultHint">
        <p class="form-control-static text-truncate">
          <i
            class="text-warning m-r-4"
            c8yIcon="exclamation-triangle"
          ></i>
          <span>{{ 'At least one file is of an unsupported type.' | translate }}</span>
        </p>
      </div>
      <ng-template #defaultHint>
        <div
          class="hint-placeholder"
          *ngIf="!uploadInProgress"
        >
          <i c8yIcon="upload"></i>
          <p>
            <b>{{ 'Drop files here or click to browse' | translate }}</b>
          </p>
          <p
            class="m-t-8 text-12 text-muted"
            *ngIf="accept"
          >
            {{ 'Supported file types:' | translate }} {{ accept }}
          </p>
          <c8y-form-group>
            <c8y-messages
              class="has-error"
              *ngIf="
                controlInstance.touched && controlInstance.errors && controlInstance.errors
                  | filterNonArrayValidationErrors
              "
            >
              <c8y-message
                *ngFor="
                  let error of controlInstance.errors | filterNonArrayValidationErrors | keyvalue
                "
              >
                {{ error.key | humanizeValidationMessage | translate: error.value }}
              </c8y-message>
            </c8y-messages>
          </c8y-form-group>
        </div>
        <div
          class="d-flex d-col p-4 flex-center"
          *ngIf="uploadInProgress"
        >
          <c8y-loading></c8y-loading>
          <p class="m-t-auto m-b-auto m-r-8 text-center">
            {{ loadingMessage | translate }}
          </p>
        </div>
      </ng-template>
    </div>
  </div>
  <div class="file-container">
    <ul class="list-group">
      <ng-container *ngFor="let file of droppedFiles; let i = index">
        <li class="list-group-item p-4 a-i-center">
          <div class="d-flex a-i-center">
            <i
              class="icon-20 m-r-8"
              [c8yIcon]="file | fileIcon"
            ></i>
            <div
              class="m-r-16 text-truncate"
              [title]="file.name"
            >
              {{ file.name }}
            </div>
            <div class="m-r-16 text-nowrap">({{ file.size | bytes }})</div>
            <div class="m-l-auto">
              <button
                class="btn btn-dot btn-dot--danger"
                title="{{ 'Remove' | translate }}"
                [attr.aria-label]="'Remove' | translate"
                type="button"
                *ngIf="!uploadInProgress"
                (click)="deleteAt(i)"
              >
                <i c8yIcon="minus-circle"></i>
              </button>
            </div>
          </div>
          <c8y-form-group>
            <c8y-messages class="has-error">
              <c8y-message
                *ngFor="
                  let error of controlInstance.errors | extractArrayValidationErrors: i | keyvalue
                "
              >
                {{ error.key | humanizeValidationMessage | translate: error.value }}
              </c8y-message>
            </c8y-messages>
          </c8y-form-group>

          <div
            class="d-block"
            data-cy="c8y-file-picker-form-control--upload-progress-bar"
            *ngIf="uploadInProgress"
          >
            <div
              class="progress progress-striped active"
              *ngIf="uploadProgress"
            >
              <div
                class="progress-bar progress-bar-info"
                [style.width]="uploadProgress[i].percentage + '%'"
                aria-valuenow="0"
                aria-valuemin="0"
                aria-valuemax="100"
                role="progressbar"
              >
                {{ uploadProgress[i].percentage }}%
              </div>
            </div>
          </div>
        </li>
      </ng-container>
    </ul>
  </div>
  <input
    class="hidden"
    id="file"
    type="file"
    #picker
    (change)="filesSelected($event)"
    [accept]="acceptedExts"
    [multiple]="maxAllowedFiles > 1"
  />
</c8y-form-group>