Web SDK documentation
  1. Components
  2. FilePreviewComponent

File

file-preview/file-preview.component.ts

Description

A component which shows a button that opens a modal with the preview of a binary managed object. This component requires CSP 'blob:' rule for img-src and media-src to be set.

Example :
<c8y-file-preview [mo]="managedObject">
    <button customButton>Preview</button>
</c8y-file-preview>

If no custom button provided, the component will use the default search icon button instead.

Implements

OnDestroy

Metadata

selector c8y-file-preview
imports NgIf IconDirective ModalComponent LoadingComponent NgSwitch NgSwitchCase NgSwitchDefault C8yTranslatePipe BytesPipe
templateUrl ./file-preview.component.html

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor(downloadEmitter: EventEmitter, modalRef: BsModalRef, modalService: BsModalService, sanitizer: DomSanitizer, filesService: FilesService, alertService: AlertService, gainsightService: GainsightService)
Parameters :
Name Type Optional
downloadEmitter EventEmitter<string> No
modalRef BsModalRef No
modalService BsModalService No
sanitizer DomSanitizer No
filesService FilesService No
alertService AlertService No
gainsightService GainsightService No

Inputs

mo
Type : IManagedObjectBinary

Methods

ngOnDestroy
ngOnDestroy()
Returns : void
Async openModal
openModal(template: TemplateRef)
Parameters :
Name Type Optional
template TemplateRef<any> No
Returns : any

Properties

BUFFERING_STATUS_TEXT
Default value : gettext( '{{speed}}/s - {{bufferedBytes}} of {{totalBytes}} buffered ({{percentage}}%)' )
contentType
Type : "image" | "video" | "text" | "json" | "unsupported"
Default value : 'unsupported'
dataUrl
Type : string
mo
Type : IManagedObjectBinary
Public modalRef
Type : BsModalRef
progress
Type : IFetchWithProgress
safeDataUrl
Type : SafeUrl

Accessors

_mo
set_mo(mo: IManagedObjectBinary)
Parameters :
Name Type Optional
mo IManagedObjectBinary No
Returns : void 
<div
  class="d-inline-block"
  *ngIf="contentType !== 'unsupported'"
  (click)="openModal(modalTemplate)"
>
  <div #customButtonRef>
    <ng-content select="[customButton]"></ng-content>
  </div>

  <ng-container *ngIf="!customButtonRef.children.length">
    <button [title]="'Preview file' | translate" type="button" class="btn btn-default btn-icon">
      <i c8yIcon="search"></i>
    </button>
  </ng-container>
</div>

<ng-template #modalTemplate>
  <c8y-modal
    [title]="mo.name"
    [customFooter]="false"
    (onClose)="modalRef.hide()"
    (onDismiss)="modalRef.hide()"
    [labels]="{ cancel: '', ok: 'Close' | translate }"
    class="text-break-word"
  >
    <div class="text-center d-block" *ngIf="!dataUrl">
      <c8y-loading layout="application" [progress]="progress.percentage"></c8y-loading>
      {{
        BUFFERING_STATUS_TEXT
          | translate
            : {
                totalBytes: progress.totalBytes | bytes,
                bufferedBytes: progress.bufferedBytes | bytes,
                percentage: progress.percentage,
                speed: progress.bytesPerSecond | bytes
              }
      }}
    </div>

    <ng-container *ngIf="dataUrl" [ngSwitch]="contentType" id="modal-body">
      <ng-container *ngSwitchCase="'image'">
        <img class="fit-w" alt="safeDataUrl" [src]="safeDataUrl" />
      </ng-container>

      <ng-container *ngSwitchCase="'video'">
        <video controls autoplay class="fit-w">
          <source [src]="safeDataUrl" />
          {{ 'Your browser does not support the video tag.' | translate }}
        </video>
      </ng-container>

      <ng-container *ngSwitchCase="'text'">
        <!--        @TODO: Implement text viewer-->
        text
      </ng-container>

      <ng-container *ngSwitchCase="'json'">
        <!--        @TODO: Implement json viewer-->
        json
      </ng-container>

      <ng-container *ngSwitchDefault></ng-container>
    </ng-container>
  </c8y-modal>
</ng-template>

results matching ""

    No results matching ""