FileReader

The FileReaderComponent allows you to easily browse and read the contents of text files. It supports file selection, content reading as plain text or base64 encoded string, file size validation, and emits events when files are selected or removed. If the selected file is a certificate, you can utilize the CertificateSignpost component to display its contents effectively.

Examples

Example 1: Basic File Reader

Basic usage with form control integration:

import {FileReaderComponent} from 'clr-lift';
import {ReactiveFormsModule} from '@angular/forms';
import {ClarityModule} from '@clr/angular';

@Component({
  imports: [ClarityModule, ReactiveFormsModule, FileReaderComponent],
  template: `
    <form clrForm [formGroup]="form" (ngSubmit)="submit()">
      <clr-control-container>
        <label for="file">File</label>
        <cll-file-reader controlId="file" clrControl [encoded]="false" [formControl]="form.controls.file" />
        @if (form.controls.file.value) {
          <clr-control-success>File content has been read successfully</clr-control-success>
        }
        <clr-control-error *clrIfError="'parse'; error as error">{{ error }}</clr-control-error>
        <clr-control-error *clrIfError="'required'">Required</clr-control-error>
      </clr-control-container>

      <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Submit</button>
    </form>
  `
})
export class FileReaderExampleComponent {
  form = new FormGroup({
    file: new FormControl('', [Validators.required]),
  });

  submit() {
    console.log(this.form.value);
  }
}

Example 2: Certificate File Reader with Validation

File reader with certificate validation and certificate signpost display:

import {CertificateSignpostComponent, certificateValidator, FileReaderComponent} from 'clr-lift';
import {ReactiveFormsModule, FormControl, FormGroup, Validators} from '@angular/forms';
import {ClarityModule} from '@clr/angular';

@Component({
  imports: [
    ClarityModule,
    ReactiveFormsModule,
    CertificateSignpostComponent,
    FileReaderComponent,
  ],
  template: `
    <form clrForm [formGroup]="form" (ngSubmit)="submit()">
      <clr-control-container>
        <label for="ca-bundle">CA Bundle</label>
        <cll-file-reader
          controlId="ca-bundle"
          clrControl
          [encoded]="false"
          [maxSize]="certFileLimit"
          [acceptFiles]="certAcceptedFiles"
          [formControl]="form.controls.caCert"
          (fileChange)="onFileChange($event)"
        />
        @if (form.controls.caCert.value) {
          <clr-control-success>
            Show certificate:
            @if (form.controls.caCert.valid) {
              <cll-certificate-signpost
                [pem]="form.controls.caCert.value"
                [pemEncoded]="false"
                [showIcon]="true"
                [position]="'bottom-right'"
              />
            }
          </clr-control-success>
        }
        <clr-control-error *clrIfError="'exceedLimit'">
          Exceed the maximum file size ({{ certFileLimit }} MB).
        </clr-control-error>
        <clr-control-error *clrIfError="'invalidCertificate'; error as error">{{ error }}</clr-control-error>
        <clr-control-error *clrIfError="'required'">Required</clr-control-error>
      </clr-control-container>
    </form>
  `
})
export class CertificateFileReaderExampleComponent {
  form = new FormGroup({
    caCert: new FormControl('', [certificateValidator(), Validators.required]),
  });

  certAcceptedFiles = '.pem, .cer, .key';
  certFileLimit = 5; // MB

  onFileChange(content: string) {
    console.log(content);
  }

  submit() {
    console.log(this.form.value);
  }
}

API Reference

FileReaderComponent

Component for browsing and reading file contents with validation support.

Inputs

controlId: string
Sets the id attribute for the file input element. Useful for associating a label with the file input.
acceptFiles: string
Specifies the types of files that the file input should accept. Uses the same format as the accept attribute of a standard HTML file input (e.g., '.pem, .cer, .key').
encoded: boolean
Determines whether the file content should be read and output as a base64 encoded string. If true, the file content will be encoded; if false, the raw text content will be used.
maxSize: number
Sets the maximum allowed file size in megabytes. If the selected file exceeds this size, a validation error will be triggered.
disabled: boolean
Disables the file input when set to true. The user will not be able to select or remove files while the component is disabled.

Outputs

fileChange: string
Emits the file content (as plain text or base64 encoded string) when a file is selected or removed.

Features

File browsing and selection
Content reading as plain text or base64 encoded string
File size validation
Content parsing error handling
Form control integration