nts-ng2-components/src/components/forms/image-picker/image-picker.component.html

Paquete de componentes para Angular2 desarrollado por NITSNETS.

<label class="img-picker" droppable="true" (ntsDragenter)="onDragEnter($event)" (dragover)="onDragOver($event)" (ntsDragleave)="onDragLeave($event)"
  (drop)="onDrop($event)" [ngClass]="{dragging: dragging}">

  <div class="placeholder" *ngIf="!imageData">
    <nts-icon class="icon" icon="image" size="large"></nts-icon>
    <p class="label">
      Click or drop an image to upload <br> ({{width}} x {{height}})
    </p>
  </div>
  <div class="preview" *ngIf="imageData">
    <img class="image" [src]="imageData">
  </div>
  <input #inputFile type="file" accept="image/*" (change)="onImagePicked($event)" [style.display]="'none'">

</label>
<nts-button class="delete" *ngIf="imageData" icon="delete" (click)="clear()"></nts-button>