Droplify

Lightweight Angular standalone drag-and-drop file upload UI component with image previews and file-type icons (PDF, Excel, CSV).

Overview

Droplify provides a dropzone plus a compact preview list. Images render previews; other files render type-specific icons.

• Framework: Angular 18 standalone
• Selector: dl-droplify
• No external deps
• Icons bundled: PDF and XLSX icons are packaged in the library assets.

Install

npm i droplify

If droplify is taken, publish under a scope, e.g. @your-scope/droplify and install that instead.

Quick start

// Any standalone component in your app
import { Component } from '@angular/core';
import { DroplifyComponent } from 'droplify';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [DroplifyComponent],
  template: `
    <dl-droplify
      [accept]="'image/*,.pdf,.csv,.xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
      [multiple]="true"
      [maxSize]="10 * 1024 * 1024"
      (filesChange)="onFiles($event)"></dl-droplify>
  `,
})
export class DemoComponent {
  onFiles(files: File[]) {
    console.log(files);
  }
}

Notes

• Include the appropriate MIME types/extensions in accept to enable CSV/Excel/PDF selection.
• PDF and Excel icons are served from the library assets/ folder; no extra setup is required.
• Image files get real previews via URL.createObjectURL().

Inputs

• accept: string | null — Same syntax as <input type="file"> accept. Example: image/*,.pdf,.csv,.xls,.xlsx.
• multiple: boolean — Allow multiple files. Default: true.
• maxSize: number — Max file size in bytes. 0 = unlimited. Default: 0.
• disabled: boolean — Disable interaction.
• placeholder: string — Text shown in the dropzone. Default: "Drop your file or click here".

Outputs

• filesChange: EventEmitter<File[]> — Emits the current list whenever it changes.
• fileAdded: EventEmitter<File> — Emits each file as it is added.
• fileRemoved: EventEmitter<File> — Emits a file when it is removed.

Features

• Drag & drop or click to browse
• Image previews with object URLs
• Type-specific icons for PDF/Excel/CSV (assets included)
• Remove files inline
• Keyboard accessible (Enter/Space)

Local development (for contributors)

ng build droplify

Outputs to dist/droplify/.

Publish to npm

1. Ensure the package name in projects/droplify/package.json is available on npm. If not, change it or use a scope (e.g., @your-scope/droplify).
2. Build the library:

   ng build droplify

3. Publish the dist output:

   npm publish dist/droplify --access public

   Make sure you are logged in with npm login.

License

MIT