renuo/ngx-renuo-upload

<div class="container">
  <h1>{{i18n.t.home.demo}}</h1>
  <div *ngIf="alertList">
    <div *ngFor="let alert of alertList" class="alert alert-danger alert-dismissable">
      <a class="close" (click)="removeAlert(alert)" aria-label="close">&times;</a>
      {{i18n.interpolate(i18n.t.upload.error[alert.messageType], {fileName: alert.file.name})}}
    </div>
  </div>

  <h1><code>ru-single-upload</code></h1>
  <div class="row">
    <div class="col-sm-6">
      <h2>{{i18n.t.home.simpleUse}}</h2>
      <ru-single-upload acceptedFiles="image/jpeg"
                        (onFileUpload)="updatePicture($event)"
                        (onFileRemove)="deletePicture()"
                        (onError)="addAlert($event)">
      </ru-single-upload>
    </div>
    <div class="col-sm-6">
      <h2>{{i18n.t.home.customUse}}</h2>
      <ru-custom-single-upload (onFileUpload)="updatePicture($event)"
                               (onFileRemove)="deletePicture()"
                               (onError)="addAlert($event)"></ru-custom-single-upload>
    </div>
  </div>
  <hr>
  <h1><code>ru-image</code></h1>
  <div class="row">
    <div class="col-sm-6">
      <h2>{{i18n.t.home.simpleUse}}</h2>
      <ru-custom-image [src]="picture"></ru-custom-image>
    </div>
    <div class="col-sm-6">
      <h2>{{i18n.t.home.advancedUse}}</h2>
      <ru-custom-image [src]="picture"
                       dimensions="400x400"
                       quality="10"
                       roundedCorners="100" background="10,10,255"
                       watermark="https://www.renuo.ch/images/logo.png">
      </ru-custom-image>
    </div>
  </div>
</div>
<div class="container">
  <h1><code>ru-multi-upload</code></h1>
  <h2>{{i18n.t.home.simpleUse}}</h2>
  <div class="ru-upload">
    <ru-multi-upload (onFileUpload)="updatePictures($event)"
                     (onError)="addAlert($event)"></ru-multi-upload>
  </div>

  <h2>{{i18n.t.home.customUse}}</h2>
  <ru-custom-multi-upload
    (onFileUpload)="updatePictures($event)"
    (onError)="addAlert($event)"></ru-custom-multi-upload>

  <h2>{{i18n.t.home.customUse}}</h2>
  <ru-custom-image-multi-upload
    maxFilesAllowed="8"
    acceptedFiles="image/jpeg, image/png"
    (onFileUpload)="updatePictures($event)"
    (onError)="addAlert($event)"></ru-custom-image-multi-upload>
  <hr>
  <h1><code>ru-gallery</code>
    <div class="btn btn-primary" (click)="addDefaultPictureToGallery()">{{i18n.t.home.addImage}}</div>
  </h1>
  <h2>{{i18n.t.home.simpleUse}}</h2>
  <ru-gallery [images]="pictures" [showPreview]="false" spacing="10"
              roundedCorners="15"
              thumbnailDimensions="300x200"></ru-gallery>
  <h2>{{i18n.t.home.advancedUse}}</h2>
  <br>
</div>
<div class="gallery">
  <ru-gallery [images]="pictures" spacing="1"></ru-gallery>
</div>