How to render new images in PrimeNg Galleria which are browsed through PrimeNG File-Upload

UI Components for Angular
Post Reply
pavan.deshmukh
Posts: 2
Joined: 13 Oct 2021, 10:41

13 Oct 2021, 10:45

I am trying to bind the the array of image files browsed through primeNg file-upload to the primeNg gallaria.

Below is the html code -

Code: Select all

<p-fileUpload #fubauto1 mode="basic" multiple="multiple" name="demo1[]" accept="image/*" maxFileSize="maxImageFileSize" 
    (onSelect)="onSelectImages($event)" chooseLabel="Select Images"></p-fileUpload>
    <p-galleria [(value)]="previews" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '640px'}"
     [numVisible]="3"> 
      <ng-template pTemplate="item" let-item>
          <img [src]="item.imagePath" style="width: 100%; display: block;" />
      </ng-template>
      <ng-template pTemplate="thumbnail" let-item>
          <div class="p-grid p-nogutter p-justify-center">
              <img [src]="item.imagePath" style="display: block;width: 50%" />
          </div>
      </ng-template>
      <ng-template pTemplate="caption" let-item>
          <h4 style="margin-bottom: .5rem; color: #ffffff;">{{item?.title}}</h4>
          <p>{{item.alt}}</p>
      </ng-template>
    </p-galleria>
angular ts code as below -

Code: Select all

onSelectImages(event) {
    this.selectedFiles = event.currentFiles;

    this.previews = [];
    if (this.selectedFiles && this.selectedFiles[0]) {
      const numberOfFiles = this.selectedFiles.length;
      for (let i = 0; i < numberOfFiles; i++) {
        const reader = new FileReader();

        reader.onload = (e: any) => {
          this.previews.push(e.target.result);
        };

        reader.readAsDataURL(this.selectedFiles[i]);
      }
    }
  }

I have tried to display images in simple image html element, it's working but when attaching to the gallaria it is not working.

also check for the working of gallaria, yes it is working when input given before initialization of gallaria but when initialization of gallaria gets completed and we bind browsed images array it is not working.

can any one help me for the above problem I am facing?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests