Skip to content

Instantly share code, notes, and snippets.

@tnqsoft

tnqsoft/example.html

Last active June 29, 2024 14:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tnqsoft/38aed9ee97d200bb899f61e68ebb2a9d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tnqsoft/38aed9ee97d200bb899f61e68ebb2a9d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tnqsoft revised this gist Jul 13, 2017. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,7 @@
    <img src="" thumbnail [image]="item?._file"/>
    <div *ngFor="let item of uploader.queue; let first = first;">
    <img src="" thumbnail [image]="item?._file"/>
    {{ item?.file?.name }}
    {{ item?.file?.size }}
    </div>

    <input type="file" ng2FileSelect [uploader]="uploader" #fileInput [accept]="accept.toString()" [multiple]="multiple"/>
  2. tnqsoft renamed this gist Jul 13, 2017. 1 changed file with 0 additions and 0 deletions.
    0 example.ts → example.html
    View file
    File renamed without changes.
  3. tnqsoft created this gist Jul 13, 2017.
    1 change: 1 addition & 0 deletions example.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <img src="" thumbnail [image]="item?._file"/>
    50 changes: 50 additions & 0 deletions thumbnail.directive.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    import { Directive, ElementRef, Input, Renderer, OnChanges, SimpleChanges } from '@angular/core';

    @Directive({
    selector: 'img[thumbnail]'
    })
    export class ThumbnailDirective {

    @Input() public image: any;

    constructor(private el: ElementRef, private renderer: Renderer) { }

    public ngOnChanges(changes: SimpleChanges) {

    let reader = new FileReader();
    let el = this.el;

    reader.onloadend = (readerEvent) => {
    let image = new Image();
    image.onload = (imageEvent) => {
    // Resize the image
    let canvas = document.createElement('canvas');
    let maxSize = 70;
    let width = image.width;
    let height = image.height;
    if (width > height) {
    if (width > maxSize) {
    height *= maxSize / width;
    width = maxSize;
    }
    } else {
    if (height > maxSize) {
    width *= maxSize / height;
    height = maxSize;
    }
    }
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(image, 0, 0, width, height);
    el.nativeElement.src = canvas.toDataURL('image/jpeg');
    };
    image.src = reader.result;
    };

    if (this.image) {
    return reader.readAsDataURL(this.image);
    }

    }

    }