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:

Example :

<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

Example

Metadata

host	`{ }`
selector	`c8y-file-picker`
standalone	`true`
imports	`FormsModule` `PopoverModule` `FormGroupComponent` `DropAreaComponent` `IconDirective` `RequiredInputPlaceholderDirective` `C8yTranslatePipe`
templateUrl	`./file-picker.component.html`

Relationships

Used by

Depends on

File picker component

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:

maxAllowedFiles - describe how many files can be dropped once, accept only numbers
onFilesPicked - emit dropped files, and register handlers for those files
$event - dropped file which has stucture of array of objects: droppedFiles[ element { file { lastModified: 168271687167, lastModifiedDate: Tue Nov 17 2020 08:37:11 GMT+0000, name: "Dropped File.txt, size: 35279, type: "", webkitRelativePath: "" } } ];
uploadChoice - defined initial view of picker ('uploadBinary' for drop zone, 'uploadUrl' for text input by default there is set 'uploadBinary')
fileUrl - URL address for a file, i.e. http://example.com/binary.zip
fileBinary - dropped file from parent component
fileUrlPopover - examples of URL which will be displayed in popover

Usage

Example :

<div>
	<c8y-file-picker
		[maxAllowedFiles]="1"
		(onFilesPicked)="onFile($event)"
		[uploadChoice]="uploadChoice"
		[fileUrl]="binary.url"
		[fileBinary]="binary.file"
		[fileUrlPopover]="textForPopover">
	</c8y-file-picker>
</div>

<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
        [(ngModel)]="uploadChoice"
        (click)="selectEditInline()"
      />
      <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>

results matching ""

No results matching ""