I'm working on an Angular app and trying to read and parse a simple CSV file that is only 92 bytes.Surprisingly, the upload and processing takes around 15 to 20 seconds, even for such a tiny file.
Here's the function I'm using:
upload() { const fileInput = document.createElement("input"); fileInput.type = "file"; fileInput.accept = ".csv"; this.isLoading = true; fileInput.addEventListener("change", (event) => { const target = event.target as HTMLInputElement; if (target.files?.length) { const file = target.files[0]; this.processUploadedFile(file); } }); fileInput.click();}private processUploadedFile(file: File) { this.uploadedFileName = file.name; if (file.type === "text/csv" || file.name.endsWith(".csv")) { const reader = new FileReader(); reader.onloadend = (e) => { const contents = e.target?.result as string; if (contents) { this.parseCSVData(contents); } }; reader.readAsText(file); } else { this.toast.danger("Please upload a valid CSV file."); }}private parseCSVData(csvData: string) { const lines = csvData.split("\n").filter((line) => line.trim() !== ""); const parsedData: Product[] = lines.slice(2).map((line, index) => { const values = line.split(";"); return { position: index + 1, height: parseInt(values[0]) || 0, diameter: parseInt(values[1]) || 0, li: parseInt(values[2]) || 0, lt: parseInt(values[3]) || 0, }; }); if (parsedData.length) { this.dataSource = parsedData; } this.isLoading = false;}<button mat-flat-button aria-label="Upload data" (click)="upload()"><mat-icon>upload</mat-icon><span>Upload data</span></button>I've tried:
- Using
FileReader.readAsText()as shown above - Switching to PapaParse, but the delay still happens
- Confirmed the CSV file is only 92 bytes, with just 3 lines of simple numeric data
- Verified the browser's performance tab (no major CPU or memory usage)
- Tried on different browsers (Chrome, Edge) — same result