In Angular, you can send files using FormData with HttpClient to make a multipart/form-data request.
Step 1: Create File Upload Service
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpEvent, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class FileUploadService {
private apiUrl = 'https://your-api-endpoint.com/upload'; // Replace with actual API
constructor(private http: HttpClient) {}
uploadFile(file: File): Observable<HttpEvent<any>> {
const formData = new FormData();
formData.append('file', file);
const req = new HttpRequest('POST', this.apiUrl, formData, {
reportProgress: true, // Enables progress tracking
responseType: 'json'
});
return this.http.request(req);
}
}
Step 2: Create File Upload Component
import { Component } from '@angular/core';
import { FileUploadService } from './file-upload.service';
@Component({
selector: 'app-file-upload',
template: `
<input type="file" (change)="onFileSelected($event)">
<button (click)="onUpload()" [disabled]="!selectedFile">Upload</button>
`
})
export class FileUploadComponent {
selectedFile: File | null = null;
constructor(private fileUploadService: FileUploadService) {}
onFileSelected(event: Event) {
const input = event.target as HTMLInputElement;
if (input.files?.length) {
this.selectedFile = input.files[0];
}
}
onUpload() {
if (this.selectedFile) {
this.fileUploadService.uploadFile(this.selectedFile).subscribe(event => {
console.log('Upload Event:', event);
});
}
}
}
