Commit d00967e8 authored by Merzough Münker's avatar Merzough Münker
Browse files

feat: add filename preview and image preview 

Signed-off-by: default avatarMerzough Münker <mmuenker@digitaix.com>
parent bd629ce9

libs/upload/src/lib/upload-button/read-as-data-url.pipe.ts

0 → 100644
+43 −0
Changes for libs/upload/src/lib/upload-button/read-as-data-url.pipe.ts: 43 added lines, 0 removed lines.
Original line number Diff line number Diff line 
import {

  Pipe,

  PipeTransform,

  NgModule

} from '@angular/core';

import { fromEvent } from 'rxjs';

import {

  take,

  map

} from 'rxjs/operators';

import { log } from '@rxap/utilities/rxjs';



@Pipe({

  name: 'readAsDataURL'

})

export class ReadAsDataURLPipe implements PipeTransform {



  public async transform(file: File | Blob | null): Promise<string | null> {



    if (!file) {

      return null;

    }



    const reader = new FileReader();



    const dataUrl$ = fromEvent<any>(reader, 'load').pipe(

      log(),

      map(event => event.target.result),

      take(1)

    );



    reader.readAsDataURL(file);



    return dataUrl$.toPromise();

  }



}



@NgModule({

  declarations: [ ReadAsDataURLPipe ],

  exports:      [ ReadAsDataURLPipe ]

})

export class ReadAsDataURLPipeModule {}

libs/upload/src/lib/upload-button/upload-button.component.html

+20 −1
Changes for libs/upload/src/lib/upload-button/upload-button.component.html: 20 added lines, 1 removed line.
Original line number Diff line number Diff line
@@ -3,12 +3,16 @@ 
    type="button"

    fxFlex="nogrow"

    #method="rxapMethod"

    (successful)="uploaded.emit($event)"

    #trigger="cdkOverlayOrigin"

    [parameters]="{ accept: accept }"

    [rxapMethod]="fileUpload"

    (successful)="uploadComplete($event)"

    [disabled]="disabled"

    cdkOverlayOrigin

    mat-stroked-button>

    <span fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="12px">

      <mat-icon fxFlex="nogrow">cloud_upload</mat-icon>&nbsp;

      <span *ngIf="file" fxFlex="nogrow">{{file.name}}</span>

      <ng-content></ng-content>

      <mat-progress-spinner

        *ngIf="method.executing$ | async"
@@ -18,5 +22,20 @@ 
      </mat-progress-spinner>

    </span>

  </button>

  <button (click)="openOverlay()" *ngIf="isImage" fxFlex="nogrow" i18n-matTooltip mat-icon-button matTooltip="Open image preview">

    <mat-icon>preview</mat-icon>

  </button>

</div>



<ng-template

  (backdropClick)="isOpen = false"

  [cdkConnectedOverlayHasBackdrop]="true"

  [cdkConnectedOverlayOpen]="isOpen"

  [cdkConnectedOverlayOrigin]="trigger"

  [cdkConnectedOverlayPositions]="positions"

  cdkConnectedOverlay

>

  <div class="rxap-upload-button overlay-container mat-elevation-z2">

    <img [src]="file | readAsDataURL | async">

  </div>

</ng-template>

libs/upload/src/lib/upload-button/upload-button.component.module.ts

+7 −1
Changes for libs/upload/src/lib/upload-button/upload-button.component.module.ts: 7 added lines, 1 removed line.
Original line number Diff line number Diff line
@@ -7,6 +7,9 @@ import { CommonModule } from '@angular/common'; 
import { MatButtonModule } from '@angular/material/button';

import { FileUploadMethod } from '../file-upload.method';

import { MethodDirectiveModule } from '@rxap/directives';

import { OverlayModule } from '@angular/cdk/overlay';

import { ReadAsDataURLPipeModule } from './read-as-data-url.pipe';

import { MatTooltipModule } from '@angular/material/tooltip';





@NgModule({
@@ -17,7 +20,10 @@ import { MethodDirectiveModule } from '@rxap/directives'; 
    MatProgressSpinnerModule,

    CommonModule,

    MatButtonModule,

    MethodDirectiveModule

    MethodDirectiveModule,

    OverlayModule,

    ReadAsDataURLPipeModule,

    MatTooltipModule

  ],

  exports:      [ UploadButtonComponent ],

  providers:    [ FileUploadMethod ]

libs/upload/src/lib/upload-button/upload-button.component.scss

+14 −0
Changes for libs/upload/src/lib/upload-button/upload-button.component.scss: 14 added lines, 0 removed lines.
Original line number Diff line number Diff line 
.overlay-container {

  min-width: 256px;

  max-width: 50vw;

  max-height: 50vh;

  padding: 6px;

  background-color: white;

  border-radius: 8px;

  overflow: hidden;



  img {

    width: 100%;

  }



}

libs/upload/src/lib/upload-button/upload-button.component.stories.ts

+3 −1
Changes for libs/upload/src/lib/upload-button/upload-button.component.stories.ts: 3 added lines, 1 removed line.
Original line number Diff line number Diff line
@@ -5,6 +5,7 @@ import { 
} from '@storybook/angular';

import { UploadButtonComponent } from './upload-button.component';

import { UploadButtonComponentModule } from './upload-button.component.module';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';



export default {

  title:      'UploadButtonComponent',
@@ -12,7 +13,8 @@ export default { 
  decorators: [

    moduleMetadata({

      imports: [

        UploadButtonComponentModule

        UploadButtonComponentModule,

        BrowserAnimationsModule

      ]

    }),

    componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)