Skip to content

Commit

Permalink
update fileupload templatedoc
Browse files Browse the repository at this point in the history
  • Loading branch information
@mehmetcetin01140
mehmetcetin01140 committed May 9, 2024
1 parent 0c2886f commit 9ed7602
Showing 1 changed file with 134 additions and 23 deletions.
157 changes: 134 additions & 23 deletions src/app/showcase/doc/fileupload/templatedoc.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, inject } from '@angular/core';
import { Component } from '@angular/core';
import { Code } from '@domain/code';
import { PrimeNGConfig } from 'primeng/api';

Expand Down Expand Up @@ -67,7 +67,7 @@ import { PrimeNGConfig } from 'primeng/api';
`
})
export class TemplateDoc {
config = inject(PrimeNGConfig);
constructor(private config: PrimeNGConfig) {}

choose(event, callback) {
callback();
Expand Down Expand Up @@ -97,38 +97,149 @@ export class TemplateDoc {

code: Code = {
basic: `<p-fileUpload name="myfile[]" url="https://www.primefaces.org/cdn/api/upload.php" [multiple]="true" accept="image/*" maxFileSize="1000000">
<ng-template pTemplate="toolbar">
<div class="py-3">Upload 3 Files</div>
</ng-template>
<ng-template let-file pTemplate="file">
<div>Custom UI to display a file</div>
</ng-template>
<ng-template pTemplate="content" let-files>
<div>Additional content.</div>
</ng-template>
<ng-template pTemplate="header" let-chooseCallback="chooseCallback" let-clearCallback="clearCallback" let-uploadCallback="uploadCallback" let-files="files">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
<p-button (onClick)="choose($event, chooseCallback)" icon="pi pi-images" [rounded]="true" [outlined]="true" />
<p-button (onClick)="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" [rounded]="true" [outlined]="true" severity="success" [disabled]="!files || files.length === 0" />
<p-button (onClick)="clearCallback()" icon="pi pi-times" [rounded]="true" [outlined]="true" severity="danger" [disabled]="!files || files.length === 0" />
</div>
<p-progressBar [value]="totalSizePercent" [showValue]="false" styleClass="md:w-20rem h-1rem w-full md:ml-auto" [ngClass]="{ 'exceeded-progress-bar': totalSizePercent > 100 }">
<span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span>
</p-progressBar>
</div>
</ng-template>
<ng-template pTemplate="content" let-files let-uploadedFiles="uploadedFiles" let-removeFileCallback="removeFileCallback" let-removeUploadedFileCallback="removeUploadedFileCallback">
<div *ngIf="uploadedFiles?.length > 0">
<h5>Pending</h5>
<div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div *ngFor="let file of files; let i = index" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div>
<img role="presentation" [alt]="file.name" [src]="file.objectURL" width="100" height="50" />
</div>
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<p-badge value="Pending" severity="warning" />
</div>
</div>
</div>
<div *ngIf="uploadedFiles?.length > 0">
<h5>Completed</h5>
<div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div *ngFor="let file of uploadedFiles; let i = index" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div>
<img role="presentation" [alt]="file.name" [src]="file.objectURL" width="100" height="50" />
</div>
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<p-badge value="Completed" class="mt-3" severity="success" />
<p-button icon="pi pi-times" (onClick)="removeUploadedFileCallback(index)" [outlined]="true" [rounded]="true" severity="danger" />
</div>
</div>
</div>
</ng-template>
<ng-template pTemplate="empty">
<div class="flex align-items-center justify-content-center flex-column">
<i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400"></i>
<p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
</div>
</ng-template>
</p-fileUpload>`,
html: `
<div class="card flex justify-content-center">
html: `<div class="card">
<p-fileUpload name="myfile[]" url="https://www.primefaces.org/cdn/api/upload.php" [multiple]="true" accept="image/*" maxFileSize="1000000">
<ng-template pTemplate="toolbar">
<div class="py-3">Upload 3 Files</div>
<ng-template pTemplate="header" let-chooseCallback="chooseCallback" let-clearCallback="clearCallback" let-uploadCallback="uploadCallback" let-files="files">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
<p-button (onClick)="choose($event, chooseCallback)" icon="pi pi-images" [rounded]="true" [outlined]="true" />
<p-button (onClick)="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" [rounded]="true" [outlined]="true" severity="success" [disabled]="!files || files.length === 0" />
<p-button (onClick)="clearCallback()" icon="pi pi-times" [rounded]="true" [outlined]="true" severity="danger" [disabled]="!files || files.length === 0" />
</div>
<p-progressBar [value]="totalSizePercent" [showValue]="false" styleClass="md:w-20rem h-1rem w-full md:ml-auto" [ngClass]="{ 'exceeded-progress-bar': totalSizePercent > 100 }">
<span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span>
</p-progressBar>
</div>
</ng-template>
<ng-template let-file pTemplate="file">
<div>Custom UI to display a file</div>
<ng-template pTemplate="content" let-files let-uploadedFiles="uploadedFiles" let-removeFileCallback="removeFileCallback" let-removeUploadedFileCallback="removeUploadedFileCallback">
<div *ngIf="uploadedFiles?.length > 0">
<h5>Pending</h5>
<div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div *ngFor="let file of files; let i = index" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div>
<img role="presentation" [alt]="file.name" [src]="file.objectURL" width="100" height="50" />
</div>
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<p-badge value="Pending" severity="warning" />
</div>
</div>
</div>
<div *ngIf="uploadedFiles?.length > 0">
<h5>Completed</h5>
<div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div *ngFor="let file of uploadedFiles; let i = index" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div>
<img role="presentation" [alt]="file.name" [src]="file.objectURL" width="100" height="50" />
</div>
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<p-badge value="Completed" class="mt-3" severity="success" />
<p-button icon="pi pi-times" (onClick)="removeUploadedFileCallback(index)" [outlined]="true" [rounded]="true" severity="danger" />
</div>
</div>
</div>
</ng-template>
<ng-template pTemplate="content" let-files>
<div>Additional content.</div>
<ng-template pTemplate="empty">
<div class="flex align-items-center justify-content-center flex-column">
<i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400"></i>
<p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
</div>
</ng-template>
</p-fileUpload>
</div>`,

typescript: `
import { Component, Input } from '@angular/core';
typescript: `import { Component } from '@angular/core';
import { PrimeNGConfig} from 'primeng/api';
import { FileUploadModule } from 'primeng/fileupload';
import { ButtonModule } from 'primeng/button';
import { CommonModule } from '@angular/common';
import { BadgeModule } from 'primeng/badge';
import { HttpClientModule } from '@angular/common/http';
import { ProgressBarModule } from 'primeng/progressbar';
@Component({
selector: 'file-upload-template-demo',
templateUrl: './file-upload-template-demo.html',
standalone: true,
imports: [FileUploadModule, ButtonModule, BadgeModule, ProgressBarModule, HttpClientModule, CommonModule]
})
export class FileUploadTemplateDemo {}`
export class FileUploadTemplateDemo {
constructor(private config: PrimeNGConfig) {}
choose(event, callback) {
callback();
}
onRemoveTemplatingFile(event, file, removeFileCallback, index) {
removeFileCallback(event, index);
}
uploadEvent(callback) {
callback();
}
formatSize(bytes) {
const k = 1024;
const dm = 3;
const sizes = this.config.translation.fileSizeTypes;
if (bytes === 0) {
return \`0 \${sizes[0]}\`;
}
const i = Math.floor(Math.log(bytes) / Math.log(k));
const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
return \`\${formattedSize} \${sizes[i]}\`;
}
}`
};
}

0 comments on commit 9ed7602

Please sign in to comment.