In my Angular application, I have a functionality where users can upload two files for processing on the server. However, I am looking to add a feature that allows users to simply copy and paste the contents of the files into two textboxes instead of going through the process of browsing and uploading the files. Below is the code snippet I currently have:
app.component.html
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
firstfile=null;
second_file = null;
title = 'first';
first_content:any
content_updated:boolean=false;
constructor(private http:HttpClient){
this.content_updated=false;
}
firstfileupload(event){
console.log("First file")
// console.log(event)
this.firstfile=event.target.files.item(0)
this.readFileContent(event.currentTarget.files[0]).subscribe(
content => {
for(const line of content.split(/[\r\n]+/)) {
if (line !== '') { // <-- regex pattern might return an empty line at the EOF
console.log(line);
}
}
}
);
console.log("Control reached here")
this.content_updated=true;
if(this.content_updated===true){
console.log(this.first_content)
}
}
secondfile(event){
this.second_file=event.target.files[0];
this.readFileContent(event.currentTarget.files[0]).subscribe(
content => {
for(const line of content.split(/[\r\n]+/)) {
if (line !== '') { // <-- regex pattern might return an empty line at the EOF
console.log(line);
}
}
}
);
console.log("Second file uploaded")
}
onUpload(){
console.log("Upload button clicked")
const fd = new FormData();
fd.append('files',this.firstfile);
fd.append('files',this.second_file);
this.http.post('http://localhost:5000',fd).subscribe(res =>{
console.log(res)
}
)
}
private readFileContent(file): Observable<any> {
let result = new Subject<any>();
const reader = new FileReader();
reader.onload = (e) => {
const fileContent = e.target.result;
result.next(fileContent);
};
reader.readAsText(file);
return result.asObservable();
}
}
app.component.html
<h1>Upload the files</h1>
<input type="file" (change)="firstfileupload($event)">
<input type="file" (change)="secondfile($event)">
<button type="button" (click)="onUpload()">Upload</button>
</div>
I am seeking guidance on how to allow users to input the file contents by copying and pasting them into text areas, which are then converted into files and sent to the server. Any suggestions or tips would be greatly appreciated. Thank you.
P.S : Please ignore all the extra code, my focus is just how to get the user input , convert to file and send it to server. In the above code I don't have any logic related to my question, I am just taking the file input.