File

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

Description

User can upload a binary directly, provide a URL, mark a file as provided by the device, or edit a text file inline.

When editInline is in allowedUploadChoices, project the editor UI via the [c8yInlineEditor] attribute:

<c8y-file-picker
  [allowedUploadChoices]="['uploadBinary', 'uploadUrl', 'editInline']"
  [(uploadChoice)]="choice"
  [(fileBinary)]="binaryFile"
  [(fileUrl)]="fileUrl"
  (textFilePicked)="onTextFilePicked($event)"
>
  <ng-container c8yInlineEditor>
    <input formControlName="editorFilename" />
    <c8y-editor formControlName="editorContent"></c8y-editor>
  </ng-container>
</c8y-file-picker>

Implements

OnInit OnChanges

<div class="form-group">
  <label
    class="c8y-radio"
    title="{{ 'Upload a binary' | translate }}"
  >
    <input
      name="uploadChoice-{{ filePickerIndex }}"
      type="radio"
      value="uploadBinary"
      #radio
      [(ngModel)]="uploadChoice"
      (click)="clearInputFromUrl()"
    />
    <span></span>
    <span>{{ 'Upload a binary' | translate }}</span>
  </label>
  <label
    class="c8y-radio"
    title="{{ 'Provide a file path' | translate }}"
    data-cy="file-picker--file-path-input"
  >
    <input
      name="uploadChoice-{{ filePickerIndex }}"
      type="radio"
      value="uploadUrl"
      #radio
      [(ngModel)]="uploadChoice"
      (click)="clearSelectedFiles()"
    />
    <span></span>
    <span>
      {{ 'Provide a file path' | translate }}
    </span>
    @if (isPopoverUsed()) {
      <button
        class="btn-help"
        [attr.aria-label]="'Help' | translate"
        popover="{{ fileUrlPopover | translate }}"
        placement="top"
        placement="top"
        triggers="focus"
        container="body"
        type="button"
        data-cy="file-picker--file-path-help"
      ></button>
    }
  </label>
  @if (allowedUploadChoices.includes('provided')) {
    <label
      class="c8y-radio"
      title="{{ 'Mark as provided' | translate }}"
    >
      <input
        name="uploadChoice-{{ filePickerIndex }}"
        type="radio"
        value="provided"
        #radio
        [(ngModel)]="uploadChoice"
        (click)="setProvidedOption()"
      />
      <span></span>
      <span>{{ 'Provided' | translate }}</span>
      <button
        class="btn-help"
        [attr.aria-label]="'Help' | translate"
        popover="{{ providedPopover | translate }}"
        placement="top"
        triggers="focus"
        container="body"
        type="button"
      ></button>
    </label>
  }
  @if (allowedUploadChoices.includes('editInline')) {
    <label
      class="c8y-radio"
      title="{{ 'Edit inline' | translate }}"
    >
      <input
        name="uploadChoice-{{ filePickerIndex }}"
        type="radio"
        value="editInline"
        #radio
        [checked]="uploadChoice === 'editInline'"
        (click)="selectEditInline(); $event.preventDefault()"
      />
      <span></span>
      <span>{{ 'Edit inline' | translate }}</span>
    </label>
  }
</div>

<div [hidden]="uploadChoice !== 'uploadBinary'">
  <c8y-form-group class="m-0">
    <c8y-drop-area
      class="drop-area-sm"
      [title]="'Drop file or click to browse' | translate"
      [attr.aria-label]="'Drop file or click to browse' | translate"
      (dropped)="onFileDropped($event)"
      [maxAllowedFiles]="maxAllowedFiles"
      [files]="droppedFiles"
    ></c8y-drop-area>
  </c8y-form-group>
</div>

@if (uploadChoice === 'editInline') {
  <div class="d-col flex-grow min-height-0">
    <ng-content select="[c8yInlineEditor]"></ng-content>
  </div>
}

<div [hidden]="uploadChoice !== 'uploadUrl'">
  <c8y-form-group class="m-0">
    <div class="m-b-4 p-b-8">
      <div class="input-group">
        <span class="input-group-addon">
          <i c8yIcon="globe"></i>
        </span>
        <input
          class="form-control"
          placeholder="{{ 'e.g.' | translate }} http://example.com/binary.zip"
          name="fileUrl"
          type="text"
          required
          data-cy="file-picker--fileUrl"
          [(ngModel)]="fileUrl"
          (ngModelChange)="onFileUrlChange($event)"
          maxlength="{{ config.maxlength }}"
          [pattern]="ValidationPattern.rules.noWhiteSpaceOnly.pattern"
        />
      </div>
    </div>
  </c8y-form-group>
</div>