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

fileBinary

Type : DroppedFile

fileUrl

Type : string

fileUrlPopover

Additional string to be displayed in a popover.

Type : string

maxAllowedFiles

Type : number

Default value : Infinity

uploadChoice

Type : "uploadBinary" | "uploadUrl"

Default value : 'uploadBinary'

Outputs

onFilesPicked $event 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
dropArea: DropAreaComponent
Type : DropAreaComponent
Decorators :
@ViewChild(DropAreaComponent, {static: undefined})
droppedFiles
droppedFiles: DroppedFile[]
Type : DroppedFile[]

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"
      [(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">
    <input
      #radio
      type="radio"
      value="uploadUrl"
      name="uploadChoice"
      [(ngModel)]="uploadChoice"
      (click)="clearSelectedFiles()"
    />
    <span></span>
    <span>
      {{ 'Provide a file path' | translate }}
    </span>
    <button
      *ngIf="isPopoverUsed()"
      class="btn btn-clean text-primary m-l-4"
      type="button"
      popover="{{ fileUrlPopover | translate }}"
      triggers="focus"
      container="body"
      placement="top"
    >
      <i [c8yIcon]="'question-circle-o'"></i>
    </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"
      [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"
          [(ngModel)]="fileUrl"
          (ngModelChange)="onFileUrlChange($event)"
          placeholder="{{ 'e.g.' | translate }} http://example.com/binary.zip"
          required
        />
      </div>
    </div>
  </c8y-form-group>
</div>

result-matching ""

    No results matching ""