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>
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?