Web SDK documentation
  1. Components
  2. FilePickerComponent

File

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

Description

User can upload a binary directly or use an URL.

Usage

Example :
<div>
<c8y-file-picker [maxAllowedFiles]="1" (onFilesPicked)="onFile($event)">
</c8y-file-picker>
</div>

Implements

OnInit

Metadata

selector c8y-file-picker
templateUrl ./file-picker.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

config
Type : FilePickerConfig
Default value : { maxlength: 2048 }
fileBinary
Type : DroppedFile
filePickerIndex
Type : number

Used only when displaying multiple file pickers in the same view.
fileUrl
Type : string
fileUrlPopover
Type : string

Additional string to be displayed in a popover.
maxAllowedFiles
Type : any
Default value : Infinity
uploadChoice
Type : "uploadBinary" | "uploadUrl"
Default value : 'uploadBinary'

Outputs

onFilesPicked
Type : EventEmitter<PickedFiles>

Methods

clearInputFromUrl
clearInputFromUrl()

Triggered when user changes upload choice, from upload url to upload binary.

Returns : void
clearSelectedFiles
clearSelectedFiles()

Triggered when user changes upload choice, to avoid cumulation of droppedFiles.

Returns : void
isPopoverUsed
isPopoverUsed()

Checks if there is popover to display.

Returns : boolean
onFileDropped
onFileDropped(droppedFiles: DroppedFile[])

Triggered by dropped file in component and pass it into drop-area component.

Parameters :
Name Type Optional
droppedFiles DroppedFile[] No
Returns : void
onFileUrlChange
onFileUrlChange(urlStr)

Triggered when user puts binary's url to upload.

Parameters :
Name Optional
urlStr No
Returns : void

Properties

dropArea
Type : DropAreaComponent
Decorators :
@ViewChild(DropAreaComponent, {static: true})
droppedFiles
Type : DroppedFile[]
ValidationPattern
Default value : ValidationPattern

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 title="{{ 'Upload a binary' | translate }}" class="c8y-radio radio-inline">
    <input
      #radio
      type="radio"
      value="uploadBinary"
      name="uploadChoice-{{filePickerIndex}}"
      [(ngModel)]="uploadChoice"
      (click)="clearInputFromUrl()"
    />
    <span></span>
    <span>{{ 'Upload a binary' | translate }}</span>
  </label>
  <label
    title="{{ 'Provide a file path' | translate }}"
    class="c8y-radio radio-inline m-l-8"
    data-cy="file-picker--file-path-input"
  >
    <input
      #radio
      type="radio"
      value="uploadUrl"
      name="uploadChoice-{{filePickerIndex}}"
      [(ngModel)]="uploadChoice"
      (click)="clearSelectedFiles()"
    />
    <span></span>
    <span>
      {{ 'Provide a file path' | translate }}
    </span>
    <button
      class="btn-help"
      type="button"
      [attr.aria-label]="'Help' | translate"
      popover="{{ fileUrlPopover | translate }}"
      placement="top"
      triggers="focus"
      container="body"
      placement="top"
      *ngIf="isPopoverUsed()"
    ></button>
  </label>
</div>

<div [hidden]="uploadChoice !== 'uploadBinary'">
  <c8y-form-group class="m-0">
    <c8y-drop-area
      class="drop-area-sm"
      (dropped)="onFileDropped($event)"
      [title]="'Drop file or click to browse' | translate"
      [attr.aria-label]="'Drop file or click to browse' | translate"
      [maxAllowedFiles]="maxAllowedFiles"
      [files]="droppedFiles"
    ></c8y-drop-area>
  </c8y-form-group>
</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
          type="text"
          class="form-control"
          name="fileUrl"
          data-cy="file-picker--fileUrl"
          [(ngModel)]="fileUrl"
          (ngModelChange)="onFileUrlChange($event)"
          placeholder="{{ 'e.g.' | translate }} http://example.com/binary.zip"
          maxlength="{{ config.maxlength }}"
          required
          [pattern]="ValidationPattern.rules.noWhiteSpaceOnly.pattern"
        />
      </div>
    </div>
  </c8y-form-group>
</div>

results matching ""

    No results matching ""