প্রথমত, আপনার কৌণিক প্রকল্পে আপনাকে HTTPClient সেট আপ করতে হবে।
Src / app / app.module.ts ফাইলটি খুলুন, HttpClientModule আমদানি করুন এবং মডিউলটির আমদানি অ্যারেটিতে এটি যুক্ত করুন:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এর পরে, একটি উপাদান তৈরি করুন:
$ ng generate component home
এর পরে, একটি আপলোড পরিষেবা উত্পন্ন করুন:
$ ng generate service upload
এরপরে, src / app / upload.service.ts ফাইলটি নিম্নরূপ খুলুন:
import { HttpClient, HttpEvent, HttpErrorResponse, HttpEventType } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class UploadService {
SERVER_URL: string = "https://file.io/";
constructor(private httpClient: HttpClient) { }
public upload(formData) {
return this.httpClient.post<any>(this.SERVER_URL, formData, {
reportProgress: true,
observe: 'events'
});
}
}
এরপরে, src / app / home / home.component.ts ফাইলটি খুলুন এবং নিম্নলিখিত আমদানিগুলি যুক্ত করে শুরু করুন:
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { HttpEventType, HttpErrorResponse } from '@angular/common/http';
import { of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { UploadService } from '../upload.service';
এরপরে, ফাইল আপলোড এবং ফাইলগুলি ভেরিয়েবল সংজ্ঞায়িত করুন এবং আপলোড সার্ভিসটি নীচে ইনজেক্ট করুন:
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
@ViewChild("fileUpload", {static: false}) fileUpload: ElementRef;files = [];
constructor(private uploadService: UploadService) { }
এরপরে, আপলোড ফাইল () পদ্ধতিটি সংজ্ঞায়িত করুন:
uploadFile(file) {
const formData = new FormData();
formData.append('file', file.data);
file.inProgress = true;
this.uploadService.upload(formData).pipe(
map(event => {
switch (event.type) {
case HttpEventType.UploadProgress:
file.progress = Math.round(event.loaded * 100 / event.total);
break;
case HttpEventType.Response:
return event;
}
}),
catchError((error: HttpErrorResponse) => {
file.inProgress = false;
return of(`${file.data.name} upload failed.`);
})).subscribe((event: any) => {
if (typeof (event) === 'object') {
console.log(event.body);
}
});
}
এরপরে, আপলোডফাইल्स () পদ্ধতিটি সংজ্ঞায়িত করুন যা একাধিক চিত্র ফাইলগুলি আপলোড করতে ব্যবহৃত হতে পারে:
private uploadFiles() {
this.fileUpload.nativeElement.value = '';
this.files.forEach(file => {
this.uploadFile(file);
});
}
এরপরে, অনক্লিক () পদ্ধতিটি সংজ্ঞায়িত করুন:
onClick() {
const fileUpload = this.fileUpload.nativeElement;fileUpload.onchange = () => {
for (let index = 0; index < fileUpload.files.length; index++)
{
const file = fileUpload.files[index];
this.files.push({ data: file, inProgress: false, progress: 0});
}
this.uploadFiles();
};
fileUpload.click();
}
এর পরে, আমাদের ইমেজ আপলোড ইউআইএইচটিএমএল টেমপ্লেট তৈরি করতে হবে। Src / app / home / home.componal.html ফাইলটি খুলুন এবং নিম্নলিখিত সামগ্রীটি যুক্ত করুন:
<div style="text-align:center; margin-top: 100px; ">
<button mat-button color="warn" (click)="onClick()">
Upload
</button>
<input type="file" #fileUpload id="fileUpload" name="fileUpload" multiple="multiple" accept="image/*" style="display:none;" /></div>
এই টিউটোরিয়াল এবং এই পোস্টটি দেখুন
Choose Fileবিটিএন আপলোড চান? বিডিডাব্লু উভয় ক্ষেত্রেই আপনি কেবল ফর্মডাটা