core/file-picker/file-picker.component.ts
User can upload a binary directly or use an URL.
<div>
<c8y-file-picker [maxAllowedFiles]="1" (onFilesPicked)="onFile($event)">
</c8y-file-picker>
</div>
OnInit
| selector | c8y-file-picker |
| templateUrl | ./file-picker.component.html |
Properties |
Methods |
Inputs |
Outputs |
| 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'
|
| onFilesPicked |
Type : EventEmitter<PickedFiles>
|
| 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 :
Returns :
void
|
| onFileUrlChange | ||||
onFileUrlChange(urlStr)
|
||||
|
Triggered when user puts binary's url to upload.
Parameters :
Returns :
void
|
| dropArea |
Type : DropAreaComponent
|
Decorators :
@ViewChild(DropAreaComponent, {static: true})
|
| droppedFiles |
Type : DroppedFile[]
|
| ValidationPattern |
Default value : ValidationPattern
|
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:
<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>