رفع وعرض الصور عبر Angular
يمكننا بكل بساطة رفع الصور إلى المتصفح عبر الكود التالي:
https://stackblitz.com/edit/angular-preview-image-upload?file=src%2Fapp%2Fapp.component.html
ولكن ستواجهنا مشاكل بسبب اختلاف الإصدارات:
حل مشكلة الـ null:
كود الـ HTML:
<div class="row">
<div class="col-8">
<mat-form-field appearance="fill">
<mat-label>اسم الفريق الأول</mat-label>
<input matInput placeholder="مثلاً: نادي الفضل">
<mat-icon matSuffix>
<img *ngIf="imageUrl" [src]="imageUrl" width="20" height="20" alt="">
</mat-icon>
<mat-hint>احذر سيتغير اسم الفريق مباشرة في البث المباشر</mat-hint>
</mat-form-field>
</div>
<div class="col-4">
<input type="file" (change)="handleFileInput($event)" class="mt-2" />
</div>
</div>
كود الـ TypeScript:
public handleFileInput(event: any) {
const target = event.target as HTMLInputElement;
const file: File = (target.files as FileList)[0];
this.fileToUpload = file;
//Show image preview
let reader = new FileReader();
reader.onload = (event: any) => {
this.imageUrl = event.target.result;
}
reader.readAsDataURL(this.fileToUpload);
}
ولكي تكون بهذا التنسيق الجميل أدناه، اتبع التالي:
https://stackblitz.com/edit/angular-material-fileupload?file=src%2Fapp%2Fwidgets%2Ffileupload.component.ts
كود الـ HTML:
<div class="container">
<div class="row">
<div class="col-12">
<div class="mt-5"></div>
<app-world-cup2014></app-world-cup2014>
</div>
<!-- <hr> -->
<div class="col-12 mt-12">
<div class="row ">
<div class="col-12 text-center border border-warning pt-3 pb-3 text-white fs-1">
معلومات الفريقين
</div>
<div class="col-6 mt-2">
<div class="row">
<div class="col-8">
<mat-form-field appearance="fill">
<mat-label>اسم الفريق الأول</mat-label>
<input matInput placeholder="مثلاً: نادي الفضل">
<mat-icon matSuffix>
<img *ngIf="imageUrl" [src]="imageUrl" width="20" height="20" alt="">
</mat-icon>
<mat-hint>احذر سيتغير اسم الفريق مباشرة في البث المباشر</mat-hint>
</mat-form-field>
</div>
<div class="col-4">
<button mat-raised-button color="primary" (click)="onClick($event)">
<mat-icon>add</mat-icon>
الشعار
<input #fileUpload type="file" style="display: none;" (change)="handleFileInput($event)" class="mt-2" />
</button>
<!-- <input #fileUpload type="file" class="input_fileupload--hidden" (input)="onInput($event)"
(change)="onFileSelected($event)" [(ngModel)]="inputFileName" [accept]="accept"> -->
<!-- <input class="ng-hide" id="input-file-id" multiple type="file" /> -->
<!-- <button mat-raised-button type="file" (change)="handleFileInput($event)" color="accent">Accent</button> -->
<!-- <input type="file" (change)="handleFileInput($event)" class="mt-2"/> -->
</div>
</div>
<p>
</p>
<!-- <div class="example-button-row">
<button mat-raised-button>Basic</button>
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>
<a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
</div> -->
</div>
</div>
</div>
</div>
</div>
كود الـ TypeScript:
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-scoreboard',
templateUrl: './scoreboard.component.html',
styleUrls: ['./scoreboard.component.scss']
})
export class ScoreboardComponent {
crestForHomeTeam: any;
name = 'Angular';
fileToUpload: any;
imageUrl: any;
@ViewChild('fileUpload')
fileUpload: ElementRef;
onClick(event: any) {
if (this.fileUpload)
this.fileUpload.nativeElement.click()
}
public handleFileInput(event: any) {
const target = event.target as HTMLInputElement;
const file: File = (target.files as FileList)[0];
this.fileToUpload = file;
//Show image preview
let reader = new FileReader();
reader.onload = (event: any) => {
this.imageUrl = event.target.result;
}
reader.readAsDataURL(this.fileToUpload);
}
}
تعليقات
إرسال تعليق