core/file-picker-form-control/file-picker-form-control.component.ts
File uploader
OnInit
AfterViewInit
ControlValueAccessor
Validator
| providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FilePickerFormControlComponent), multi: true
}
{
provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => FilePickerFormControlComponent)
}
|
| selector | c8y-file-picker-form-control |
| templateUrl | ./file-picker-form-control.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostListeners |
constructor(filesService: FilesService, injector: Injector)
|
|||||||||
|
Parameters :
|
| accept |
Type : string
|
|
Specifies a filter for what file types the user can pick from the file input dialog box. By default all types are accepted. Specify file types by extensions: Example :Specify file types by extensions and generic types GENERIC_FILE_TYPE: Example :Specify file types by generic types GENERIC_FILE_TYPE: Example : |
| disableValidators |
Type : IAvailableValidators
|
Default value : {}
|
|
Allows to disable default validators. Accepts object with following optional properties:
|
| maxAllowedFiles |
Type : number
|
Default value : Infinity
|
|
Sets how many files can be submitted, accepts only numbers. |
| minRequiredFiles |
Type : number
|
Default value : 1
|
|
Sets the minimum number of files to be uploaded, accepts only numbers. |
| uploadInProgress |
Type : boolean
|
Default value : false
|
|
Displays upload progress bar, accepts only boolean. |
| uploadProgress |
Type : IFetchWithProgress[]
|
|
The array of progress state objects for each selected file (matched by index). |
| validateExtensionOnDrag |
Type : boolean
|
Default value : false
|
|
Display warning if any file dragged over the drop area has unsupported extension. |
| dropped |
Type : EventEmitter<File[]>
|
|
Emits an event with the array of File objects representing the dropped files. |
| window:dragover |
Arguments : '$event'
|
window:dragover(e)
|
| window:drop |
Arguments : '$event'
|
window:drop(e)
|
| afterValueChanged |
afterValueChanged()
|
|
Returns :
void
|
| deleteAt | ||||||
deleteAt(index: number)
|
||||||
|
Parameters :
Returns :
void
|
| filesSelected | ||||||
filesSelected(ev: Event)
|
||||||
|
Parameters :
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onDragOver | ||||
onDragOver(e)
|
||||
Decorators :
@HostListener('window:dragover', ['$event'])
|
||||
|
Parameters :
Returns :
void
|
| onDrop | ||||||
onDrop(e: DragEvent)
|
||||||
|
Parameters :
Returns :
void
|
| onWindowDrop | ||||
onWindowDrop(e)
|
||||
Decorators :
@HostListener('window:drop', ['$event'])
|
||||
|
Parameters :
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: never)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: never)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnValidatorChange | ||||||
registerOnValidatorChange(fn: () => void)
|
||||||
|
Parameters :
Returns :
void
|
| setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| validate | ||||||
validate(control: AbstractControl)
|
||||||
|
Parameters :
Returns :
ValidationErrors | null
|
| writeValue | ||||||
writeValue(files: File[] | null)
|
||||||
|
Parameters :
Returns :
void
|
| acceptedExts |
Type : string[]
|
| controlInstance |
Type : AbstractControl
|
| disabled |
Type : boolean
|
| disabledValidators |
Type : IAvailableValidators
|
Default value : {
fileMaxSize: false,
fileNonEmpty: false,
fileNameMaxLength: false
}
|
| droppedFiles |
Type : File[]
|
Default value : []
|
| errors |
Type : ValidationErrors
|
| filePlaceholder |
Type : ElementRef<HTMLElement>
|
Decorators :
@ViewChild('filePlaceholder', {static: true})
|
| isDraggedFileUnsupported$ |
Type : Observable<boolean>
|
| isDraggingFiles$ |
Type : Observable<boolean>
|
| isDraggingOverFilePlaceholder$ |
Type : Observable<boolean>
|
| isDropAreaEnlarged$ |
Type : Observable<boolean>
|
| isExtensionAllowed$ |
Type : Observable<boolean>
|
| loadingMessage |
Default value : gettext('Upload in progress')
|
| valid |
Type : boolean
|
Allows to select a binary for upload. Component provides drop area functionality allowing you to just drop files within specified area. Attributes:
<div>
<c8y-file-picker-form-control
#filePicker
[formControl]="control"
[uploadInProgress]="isLoading"
(dropped)="onFileDroppedEvent($event)"
[uploadProgress]="uploadProgress"
></c8y-file-picker-form-control>
</div><c8y-form-group class="m-0">
<div
class="file-picker-drop-zone"
[class.dragging]="isDropAreaEnlarged$ | async"
tabindex="0"
>
<div
class="file-placeholder pointer"
[class.drag-over]="isDraggingOverFilePlaceholder$ | async"
#filePlaceholder
(drop)="onDrop($event)"
(click)="!uploadInProgress && picker.click()"
>
<div *ngIf="validateExtensionOnDrag && (isDraggedFileUnsupported$ | async); else defaultHint">
<p class="form-control-static text-truncate">
<i
class="text-warning m-r-4"
c8yIcon="exclamation-triangle"
></i>
<span>{{ 'At least one file is of an unsupported type.' | translate }}</span>
</p>
</div>
<ng-template #defaultHint>
<div
class="hint-placeholder"
*ngIf="!uploadInProgress"
>
<i c8yIcon="upload"></i>
<p>
<b>{{ 'Drop files here or click to browse' | translate }}</b>
</p>
<p
class="m-t-8 text-12 text-muted"
*ngIf="accept"
>
{{ 'Supported file types:' | translate }} {{ accept }}
</p>
<c8y-form-group>
<c8y-messages
class="has-error"
*ngIf="
controlInstance.touched && controlInstance.errors && controlInstance.errors
| filterNonArrayValidationErrors
"
>
<c8y-message
*ngFor="
let error of controlInstance.errors | filterNonArrayValidationErrors | keyvalue
"
>
{{ error.key | humanizeValidationMessage | translate: error.value }}
</c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
<div
class="d-flex d-col p-4 flex-center"
*ngIf="uploadInProgress"
>
<c8y-loading></c8y-loading>
<p class="m-t-auto m-b-auto m-r-8 text-center">
{{ loadingMessage | translate }}
</p>
</div>
</ng-template>
</div>
</div>
<div class="file-container">
<ul class="list-group">
<ng-container *ngFor="let file of droppedFiles; let i = index">
<li class="list-group-item p-4 a-i-center">
<div class="d-flex a-i-center">
<i
class="icon-20 m-r-8"
[c8yIcon]="file | fileIcon"
></i>
<div
class="m-r-16 text-truncate"
[title]="file.name"
>
{{ file.name }}
</div>
<div class="m-r-16 text-nowrap">({{ file.size | bytes }})</div>
<div class="m-l-auto">
<button
class="btn btn-dot btn-dot--danger"
title="{{ 'Remove' | translate }}"
[attr.aria-label]="'Remove' | translate"
type="button"
*ngIf="!uploadInProgress"
(click)="deleteAt(i)"
>
<i c8yIcon="minus-circle"></i>
</button>
</div>
</div>
<c8y-form-group>
<c8y-messages class="has-error">
<c8y-message
*ngFor="
let error of controlInstance.errors | extractArrayValidationErrors: i | keyvalue
"
>
{{ error.key | humanizeValidationMessage | translate: error.value }}
</c8y-message>
</c8y-messages>
</c8y-form-group>
<div
class="d-block"
data-cy="c8y-file-picker-form-control--upload-progress-bar"
*ngIf="uploadInProgress"
>
<div
class="progress progress-striped active"
*ngIf="uploadProgress"
>
<div
class="progress-bar progress-bar-info"
[style.width]="uploadProgress[i].percentage + '%'"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
role="progressbar"
>
{{ uploadProgress[i].percentage }}%
</div>
</div>
</div>
</li>
</ng-container>
</ul>
</div>
<input
class="hidden"
id="file"
type="file"
#picker
(change)="filesSelected($event)"
[accept]="acceptedExts"
[multiple]="maxAllowedFiles > 1"
/>
</c8y-form-group>