file-grab

Lightweight Angular dropzone component with built‑in file‑type badges (PDF, XLS/XLSX/CSV, Images). Supports drag & drop, click‑to‑select, multiple files, remove, and open in new tab.

Installation

npm i fg-file-grab
# or scoped
# npm i @your-scope/file-grab

Peer dependencies: Angular ^18, @angular/common, @angular/core.

Usage

Import the standalone component and place the selector in your template.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FileGrabComponent } from 'fg-file-grab';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FileGrabComponent],
  template: `
    <file-grab
      [uploadHereLabel]="'Drop your file or click here'"
      [uploadDescLabel]="'Accepts jpg, jpeg, png, pdf, xls, xlsx, csv'"
      [accept]="'image/jpg,image/jpeg,image/png,application/pdf,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv,.xls,.xlsx,.csv,.pdf,.jpg,.jpeg,.png'"
      [multiple]="true"
      (fileSelected)="onFileSelected($event)"
      (filesChanged)="onFilesChanged($event)">
    </file-grab>
  `
})
export class AppComponent {
  onFileSelected(file: File) {
    // Handle a single file (e.g., upload to storage)
  }
  onFilesChanged(files: File[]) {
    // Handle the current list of selected files
  }
}

Inputs

• uploadHereLabel?: string – Main dropzone label.
• uploadDescLabel?: string – Secondary helper text.
• accept?: string – CSV of MIME types and/or extensions. If omitted, defaults to jpg, jpeg, png, pdf, xls, xlsx, csv.
• multiple: boolean – Allow multiple file selection (default: false).

Outputs

• fileSelected: EventEmitter<File> – Fires for each added file.
• filesChanged: EventEmitter<File[]> – Fires with the full list when it changes (add/remove).

Supported Types (by default)

• Images: image/jpg, image/jpeg, image/png, or .jpg, .jpeg, .png
• PDF: application/pdf or .pdf
• Spreadsheets: application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/csv or .xls, .xlsx, .csv

Styling

The component ships with minimal CSS for a modern look (dashed border, badges). You can override styles by targeting the classes:

• .fg-dropzone, .fg-over, .fg-icon-pdf, .fg-icon-xls, .fg-icon-generic, .fg-remove, etc.

Development

Run the demo app in this workspace to develop locally.

npx ng serve demo-app

Build the library (Ivy partial mode):

npx ng build file-grab --configuration production

Publish (no GitHub required)

# bump version in projects/file-grab/package.json
npx ng build file-grab --configuration production
npm publish ./dist/file-grab --access public

Verify:

npm view file-grab version

License

MIT