Handling Massive Excel Files in Angular: From Upload to IndexedDB with Lightning-Fast Search

Avatar photoByAdil

A comprehensive guide to building scalable data processing solutions.

1. Hook: The Pain of Big Excel Files in Angular

Ever tried uploading a 50MB Excel file with 100,000+ rows in your Angular app?

If yes, you probably saw your app freeze, your memory spike, and your users quickly lose patience. I’ve been there — one of my clients needed to handle bulk GIS reports in Excel format, and the initial solution of pushing everything into memory with NgRx completely brought the browser to its knees.

  • localStorage? Limited to ~5–10MB and not designed for heavy data.
  • NgRx state? Keeping a 100K-row dataset in state is a recipe for sluggish performance.
  • Plain arrays in memory? Works until the browser tab starts consuming gigabytes of RAM.

So what’s the fix? In my experience, the winning combo is:

👉 Excel → JSON → IndexedDB (via Dexie.js) → Reactive Search in Angular

This architecture gives you enterprise-grade data handling, real-time search, and a responsive UI even with hundreds of thousands of rows.

Let me walk you through how I solved this problem and how you can too.

2. The Problem Statement: Why Traditional Approaches Fail

Before diving into the solution, let’s outline why handling massive Excel

  • files in Angular is such a tough challenge.
  • localStorage Limitations
  • Performance Bottlenecks in NgRx
  • User Experience Issues
  • Memory Consumption
  • Search Capability Gaps

Clearly, we need something more robust — and this is where IndexedDB with Dexie comes in.

3. The Solution Architecture: Excel to IndexedDB with Angular

Here’s the high-level workflow I’ve implemented successfully in real-world apps:

Step 1: Excel Upload

  • Use Angular’s with validation (size, type).
  • Read the file as an ArrayBuffer to avoid memory blowups.

Step 2: Excel to JSON Conversion

  • Leverage the XLSX library.
  • Convert sheets into JSON objects while streaming rows if possible.

Step 3: IndexedDB via Dexie

  • Dexie.js gives a clean TypeScript-friendly wrapper over IndexedDB.
  • Create a schema with indexed fields for fast search.
  • Store all Excel rows directly in IndexedDB instead of memory.

Step 4: Reactive Search

  • Use Angular Reactive Forms with debouncing.
  • Provide both field-specific and full-text search.
  • Query Dexie directly for lightning-fast results.

Step 5: State Management with NgRx

  • Keep raw data out of NgRx!
  • Only store search results and UI state (e.g., filters, pagination).
  • Use NgRx Effects for async Dexie queries.

Step 6: Display Results

  • Show paginated data in Angular Material Table.
  • Optimize rendering with trackBy and ChangeDetectionStrategy.OnPush.

This architecture combines the best of both worlds: Dexie for storage & search, NgRx for orchestration, Angular for UI.

4. Technical Implementation

A. File Upload & Excel Processing
Uploading files in Angular is straightforward, but the devil is in the details. 

onFileSelected(event: Event): void {
  const input = event.target as HTMLInputElement;
  if (!input.files?.length) return;

  const file = input.files[0];
  if (file.size > 50 * 1024 * 1024) {
    alert('File too large!');
    return;
  }

  const reader = new FileReader();
  reader.onload = async (e) => {
    const data = new Uint8Array(e.target?.result as ArrayBuffer);
    const workbook = XLSX.read(data, { type: 'array' });
    const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
    await this.excelService.storeData(jsonData);
  };
  reader.readAsArrayBuffer(file);
}

Key Notes:

  • Use ArrayBuffer instead of readAsText for efficiency.
  • Always validate file size and type.
  • Handle corrupted files gracefully with try/catch.

B. Dexie Service Extension
Dexie makes IndexedDB usable without 200+ lines of boilerplate. 

import Dexie, { Table } from 'dexie';

export interface ExcelRow {
  id?: number;
  name: string;
  email: string;
  amount: number;
}

export class ExcelDB extends Dexie {
  rows!: Table<ExcelRow, number>;

  constructor() {
    super('ExcelDB');
    this.version(1).stores({
      rows: '++id,name,email,amount' // Indexes for fast search
    });
  }
}

@Injectable({ providedIn: 'root' })
export class ExcelService {
  private db = new ExcelDB();

  async storeData(data: ExcelRow[]): Promise<void> {
    await this.db.rows.bulkPut(data);
  }

  async searchByName(name: string): Promise<ExcelRow[]> {
    return this.db.rows.where('name').startsWithIgnoreCase(name).toArray();
  }
}

Highlights:

  • Schema includes indexes (name, email, amount).
  • Use bulkPut for fast batch insertion.
  • Indexed queries run in milliseconds even with 100K+ rows.

C. Search Form Implementation
Reactive Forms with debouncing make the UI responsive. 

results$!: Observable<any[]>;

this.searchForm = this.fb.group({
  field: ['name'],
  query: ['']
});

this.searchForm.valueChanges
  .pipe(debounceTime(300), distinctUntilChanged())
  .subscribe(async ({ field, query }) => {
    this.store.dispatch(searchResultAction({ searchResult: results }));
  });

showGrid() {
  this.results$ = this.store.select(selectAllSearchResults);
}
  • debounceTime prevents firing queries on every keystroke.
  • Users can select which field to search.
  • Advanced options like “search in all fields” can be added.

And in the template, we can leverage Ag-Grid for efficient rendering and pagination: 

<button type="submit" (click)="showGrid()">Show Results</button>

<ag-grid-angular
  [rowData]="results$ | async"
  [columnDefs]="columnDefs"
  [pagination]="true"
  [paginationPageSize]="10"
  style="width: 100%; height: 500px"
></ag-grid-angular>

D. State Management Integration
NgRx shouldn’t store massive datasets — but it’s great for coordination. 

// action.ts
export const searchResultAction = createAction(
  '[Search] Load Result',
  props<{ searchResult: SearchResult[] }>()
);

// reducer.ts
export const initialsearchResultState: EntityState<SearchResult> = searchResultAdapter.getInitialState();
export const searchResultDbReducer = createReducer(
    initialsearchResultState,
    on(searchResultAction, (state, { searchResult }) => {
        const clearedState = searchResultAdapter.removeAll(state);
        return searchResultAdapter.upsertMany(searchResult, clearedState);
    }),
);

// selector.ts
export const selectSearchResultState = (state: SearchResult) => state.searchData;
export const selectAllSearchResults = createSelector(
  selectSearchResultState,
  searchResultAdapter.getSelectors().selectAll
);
  • Actions initiate searches.
  • Effects handle async Dexie queries.
  • Store only the search results + filters, not the raw Excel dataset.

5. Performance Benefits

  • IndexedDB vs localStorage: IndexedDB supports gigabytes, localStorage only a few MB.
  • Speed: Indexed queries can return results in under 100ms for 100K+ rows.
  • Memory Optimization: Data lives in IndexedDB, not in JS heap.
  • Scalability: Supports multiple Excel uploads across sessions.
  • Compatibility: Works in all modern browsers (Chrome, Edge, Firefox, Safari).

6. Best Practices & Tips

  • Chunk Insertion: Insert rows in chunks (e.g., 5K at a time) to avoid blocking the main thread.
  • Use Web Workers: Offload Excel parsing to a worker for smooth UI.
  • Progress Indicators: Show upload + processing progress to users.
  • Validation: Check data types before storage (e.g., amounts should be numeric).
  • Cleanup: Provide a “Clear Database” button for users.
  • Avoid Over-Indexing: Too many indexes slow down inserts. Choose wisely.

7. Conclusion & Call to Action

Handling massive Excel files in Angular doesn’t have to be painful.

By combining Excel parsing (XLSX) with IndexedDB (Dexie) and NgRx for orchestration, we can build applications that handle hundreds of thousands of rows with lightning-fast search and a smooth user experience.

I’ve used this approach in real-world finance and HR apps where large Excel files are the norm — and the difference in performance is night and day.

Have you faced similar challenges in your Angular projects? 👉 What’s your go-to solution for handling large datasets on the frontend? 👉 Have you used IndexedDB in production?

I’d love to hear your experiences. Let’s share strategies and make big-data handling in Angular a breeze.

Similar Posts