File Reader

Use cases:

• Reading and processing files client-side without uploading to server
• Parsing JSON files for client-side data processing
• File validation and content extraction

The file-reader component can be used to select and process files from the local file system. It primarily supports JSON files and provides automatic parsing capabilities. The component processes files client-side without uploading them to a server, making it ideal for client-side data processing scenarios.

Example

Genesis

Declaration

  <rapid-file-reader></rapid-file-reader>

Usage

// Define the event detail types
interface FileReadEventDetail {
  fileName: string;
  content: any;
  file: File;
}

interface ErrorEventDetail {
  message: string;
  error?: any;
}

@customElement({
  name: 'my-element',
  template: html`
      <rapid-file-reader
        label="Select JSON File"
        accept=".json,application/json"
        file-size-limit-bytes="10485760"
        auto-process="false"
        processing-delay-ms="1000"
        @file-read=${(x, ctx) => x.handleFileRead(ctx.event)}
        @error=${(x, ctx) => x.handleError(ctx.event)}
        @clear=${(x) => x.handleClear()}
      >
      </rapid-file-reader>
  `,
})
export class MyElement extends GenesisElement {
  handleFileRead(event: CustomEvent<FileReadEventDetail>) {
    const { fileName, content, file } = event.detail;
    console.log('File processed:', fileName, content);
  }

  handleError(event: CustomEvent<ErrorEventDetail>) {
    console.error('File processing error:', event.detail);
  }

  handleClear() {
    console.log('File cleared');
  }
}

React

Declaration

  <rapid-file-reader></rapid-file-reader>

Usage

// Define the event detail types
interface FileReadEventDetail {
  fileName: string;
  content: any;
  file: File;
}

interface ErrorEventDetail {
  message: string;
  error?: any;
}

export function MyComponent() {
  const handleFileRead = (event: CustomEvent<FileReadEventDetail>) => {
    const { fileName, content, file } = event.detail;
    console.log('File processed:', fileName, content);
  };

  const handleError = (event: CustomEvent<ErrorEventDetail>) => {
    console.error('File processing error:', event.detail);
  };

  const handleClear = () => {
    console.log('File cleared');
  };

  return (
    <rapid-file-reader
      label="Select JSON File"
      accept=".json,application/json"
      file-size-limit-bytes="10485760"
      auto-process="false"
      processing-delay-ms="1000"
      onFileRead={handleFileRead}
      onError={handleError}
      onClear={handleClear}
    >
    </rapid-file-reader>
  );
}

Angular

Declaration

  <rapid-file-reader></rapid-file-reader>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';

// Define the event detail types
interface FileReadEventDetail {
  fileName: string;
  content: any;
  file: File;
}

interface ErrorEventDetail {
  message: string;
  error?: any;
}

@Component({
  selector: 'my-root',
  template: `
    <rapid-file-reader
      label="Select JSON File"
      accept=".json,application/json"
      file-size-limit-bytes="10485760"
      auto-process="false"
      processing-delay-ms="1000"
      (fileRead)="handleFileRead($event)"
      (error)="handleError($event)"
      (clear)="handleClear()"
    >
    </rapid-file-reader>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [FormsModule],
})
export class AppComponent {
  handleFileRead(event: CustomEvent<FileReadEventDetail>) {
    const { fileName, content, file } = event.detail;
    console.log('File processed:', fileName, content);
  }

  handleError(event: CustomEvent<ErrorEventDetail>) {
    console.error('File processing error:', event.detail);
  }

  handleClear() {
    console.log('File cleared');
  }
}

The file-reader component provides a user-friendly interface for file selection and processing. It includes:

• File Selection: Browse button to select files from the local file system
• File Validation: Automatic validation of file type and size
• Processing State: Visual feedback during file processing
• Content Parsing: Automatic JSON parsing for supported file types
• Error Handling: Comprehensive error handling with user notifications

API

Property and attribute binding examples for Genesis Component syntax.

Attributes

Name	Type	Description	Example
label	string	This attribute specifies the caption for the file input, similar to HTML Label element. There is no default value specified for label.	<rapid-file-reader label="Select JSON File">
accept	string	This attribute determines the file formats that the file input should be able to select. Multiple file formats can be specified by separating them with a comma. By default, only JSON files are accepted: .json,application/json.	<rapid-file-reader accept=".json,application/json">
fileSizeLimitBytes	string	This attribute specifies the maximum file size in bytes that is supported by the file input. The default value is 10_485_760 (10MB).	<rapid-file-reader file-size-limit-bytes="1048576">
autoProcess	boolean	This attribute determines whether the file should be automatically processed when selected. When true, the file is processed immediately after selection. When false, a "Process file" button is shown. The default value is false.	<rapid-file-reader auto-process="true">
processingDelayMs	string	This attribute specifies the delay in milliseconds before hiding the processing state after file processing is complete. The default value is 1000 (1 second).	<rapid-file-reader processing-delay-ms="3000">

Properties

Name	Type	Description	Example
fileContent	any	This property contains the parsed content of the processed file. For JSON files, this will be the parsed JavaScript object. It is null when no file is processed.	const content = fileReader.getFileContent();
onFileRead	(data: any) => void	This property is a callback function that is called when a file is successfully processed. The function receives the parsed file content as a parameter.	// Property binding in template <rapid-file-reader :onFileRead=${(content) => console.log('File content:', content)}> // Property assignment in code fileReader.onFileRead = (content) => { console.log('File content:', content); };

Slots

This component doesn't have any slots.

Parts

Part	Use
file-name-input	The text field showing the selected file name.
select-file-button	The browse button for file selection.
process-file-button	The process file button (shown when auto-process is false).
processing-overlay	The overlay shown during file processing.
clear-icon	The clear icon for removing file selection.

Events fired

Event	Type	Description	Example
fileRead	Event	Emits when a file is successfully processed. The event detail contains fileName, content, and file properties.	<rapid-file-reader @file-read=${(x, ctx) => x.handleFileRead(ctx.event)}>
error	Event	Emits when there is an error during file processing, validation, or parsing.	<rapid-file-reader @error=${(x, ctx) => x.handleError(ctx.event)}>
clear	Event	Emits when the file selection is cleared.	<rapid-file-reader @clear=${(x) => x.handleClear()}>

Events listened to

This component doesn't listen to any events.

Methods

Name	Parameters	Return Type	Description	Example
handleFileProcessing	None	Promise<void>	Manually triggers file processing. Useful when auto-process is disabled.	await fileReader.handleFileProcessing();
getFileContent	None	any	Returns the parsed content of the processed file.	const content = fileReader.getFileContent();
getSelectedFile	None	File | null	Returns the currently selected File object.	const file = fileReader.getSelectedFile();
clearSelection	None	void	Clears the current file selection and resets the component state.	fileReader.clearSelection();

Limitations

note

• Currently supports single file selection only
• Primarily designed for JSON file processing
• File processing is done client-side only
• Future versions will support multiple files and additional file types

Best Practices

1. File Type Validation: Always specify appropriate file types in the accept attribute
2. Size Limits: Set reasonable file size limits to prevent performance issues
3. Error Handling: Implement proper error handling for file processing failures
4. User Feedback: Use the processing delay to provide visual feedback during file operations
5. Auto-processing: Use auto-process for immediate feedback, manual processing for user control