This content originally appeared on DEV Community and was authored by Mukesh Soni
In modern web applications, there are scenarios where you need to save text content in an HTML file, read the file, and send its content to a server as form-data. This guide will walk you through achieving this in an Angular 16 application using Angular's HttpClient.
Prerequisites
Before we dive in, ensure you have the following installed:
- Node.js and npm
- Angular CLI
If you haven't installed Angular CLI, you can do so using npm:
npm install -g @angular/cli
Setting Up the Angular Application
Create a new Angular application if you don't have one already:
ng new angular-file-upload
cd angular-file-upload
Add HttpClientModule to your Angular project. Open app.module.ts and add it to the imports array:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { FileService } from './file.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [FileService],
bootstrap: [AppComponent]
})
export class AppModule { }
Creating the FileService
First, we need a service to handle file operations. Create a new service:
ng generate service file
In file.service.ts, add the following code:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class FileService {
private tempFileUrl: string | null = null;
saveHtmlFile(content: string): string {
const blob = new Blob([content], { type: 'text/html' });
this.tempFileUrl = window.URL.createObjectURL(blob);
return this.tempFileUrl;
}
getTempFileUrl(): string | null {
return this.tempFileUrl;
}
revokeTempFileUrl(): void {
if (this.tempFileUrl) {
window.URL.revokeObjectURL(this.tempFileUrl);
this.tempFileUrl = null;
}
}
}
Component Implementation
Now, let's implement the component to save text content in an HTML file, read it, and send it as form-data using HttpClient.
Update your component (app.component.ts) with the following code:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FileService } from './file.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private fileService: FileService, private http: HttpClient) { }
saveHtmlContent() {
const content = `
<html>
<head>
<title>Sample HTML File</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a sample HTML file.</p>
</body>
</html>
`;
const fileUrl = this.fileService.saveHtmlFile(content);
console.log('Temporary HTML File URL:', fileUrl);
}
async sendFileAsFormData() {
const fileUrl = this.fileService.getTempFileUrl();
if (!fileUrl) {
console.error('No temporary file URL available');
return;
}
try {
const response = await fetch(fileUrl);
const content = await response.text();
// Create a Blob from the content
const blob = new Blob([content], { type: 'text/html' });
const formData = new FormData();
formData.append('file', blob, 'sample.html'); // 'sample.html' is the file name
// Send the form-data using HttpClient with response type 'blob'
this.http.post('https://your-api-endpoint.com/upload', formData, { responseType: 'blob' })
.subscribe(blob => {
// Handle the blob response
const downloadUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = downloadUrl;
link.download = 'response-file.html'; // Name of the downloaded file
link.click();
window.URL.revokeObjectURL(downloadUrl);
console.log('File downloaded successfully');
}, error => {
console.error('Error sending file content:', error);
});
} catch (error) {
console.error('Error reading file content:', error);
} finally {
this.fileService.revokeTempFileUrl();
}
}
clearTempFile() {
this.fileService.revokeTempFileUrl();
console.log('Temporary file URL revoked');
}
}
Template
Update the component template (app.component.html) to include buttons for saving and uploading the HTML content:
<div>
<button (click)="saveHtmlContent()">Save Content as HTML</button>
<button (click)="sendFileAsFormData()">Send Saved HTML as Form-Data and Download Blob</button>
<button (click)="clearTempFile()">Clear Temporary File</button>
</div>
Explanation
-
saveHtmlContent(): This method saves text content in an HTML file and logs the temporary URL. -
sendFileAsFormData(): - Fetches the file content using the temporary URL.
- Creates a Blob from the fetched content.
- Creates a
FormDataobject and appends the Blob to it. - Sends the
FormDataobject in an HTTP POST request to the specified API endpoint, configuring Angular'sHttpClientto expect ablobresponse. - Handles the blob response by creating a download link and triggering a download of the received file.
- Logs success or error messages.
- Revokes the temporary file URL after the request is complete.
-
clearTempFile(): This method clears the temporary URL to free up memory.
This content originally appeared on DEV Community and was authored by Mukesh Soni
Mukesh Soni | Sciencx (2024-07-12T13:27:35+00:00) How to Save and Download Text in an HTML File in Angular 16 Using HttpClient. Retrieved from https://www.scien.cx/2024/07/12/how-to-save-and-download-text-in-an-html-file-in-angular-16-using-httpclient/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.