https://github.com/sanjib-kumar-mandal/ng-files-input
Angular file input component with live preview support for images, PDFs, text files, and upload progress tracking.
https://github.com/sanjib-kumar-mandal/ng-files-input
angular angular-components angular-library file-input file-preview file-upload file-uploader ng-files upload-progress
Last synced: 12 months ago
JSON representation
Angular file input component with live preview support for images, PDFs, text files, and upload progress tracking.
- Host: GitHub
- URL: https://github.com/sanjib-kumar-mandal/ng-files-input
- Owner: sanjib-kumar-mandal
- License: mit
- Created: 2025-06-22T13:39:53.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2025-06-23T09:34:08.000Z (12 months ago)
- Last Synced: 2025-06-23T10:33:13.794Z (12 months ago)
- Topics: angular, angular-components, angular-library, file-input, file-preview, file-upload, file-uploader, ng-files, upload-progress
- Language: HTML
- Homepage:
- Size: 128 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-files-input 📁🖼️
**ng-files-input** is an Angular library for previewing uploaded files with support for images, PDFs, plain text, and more — all wrapped in a highly customizable and developer-friendly file input component.
---
## ✨ Features
- 📸 Image preview
- 📄 PDF viewer with embedded preview
- ❓ Graceful fallback for unsupported file types
- 🧠 Automatic file-type detection
- 🎨 Fully customizable UI
- 🔌 Works with `ngModel` and `FormControl`
- 🧩 Designed for modern Angular (v19+)
---
## 📦 Installation
```bash
npm install ng-files-input
```
## ⚙️ Usage
- Import the module
```ts
import { NgFilesInput, UploadType } from "ng-files-input";
@Component({
imports: [NgFilesInput],
})
export class ExampleComponent {
uploadType = UploadType.IMAGE;
}
```
- Template Usage
```html
Please select image
```
- Style modification
```scss
--ng-files-area-width: 200px;
--ng-files-area-height: 180px;
--ng-files-border-width: 2px;
--ng-files-border-style: solid;
--ng-files-border-color: #9e9e9e;
--ng-files-background: #f5f5f5;
--ng-files-icon-size: 40;
--ng-files-icon-color: green; // This may or may not work
--ng-files-placeholder-color: #292826;
--ng-files-placeholder-font-size: 12px;
--ng-files-placeholder-gap: 5px;
--ng-files-progress-bar-color: green;
```
## 🚀 Advanced Usage: Custom Upload Function with Progress
TS
```ts
import { HttpClient, HttpRequest } from "@angular/common/http";
import { Component, inject } from "@angular/core";
@Component({
selector: "app-file-upload",
templateUrl: "./file-upload.component.html",
})
export class FileUploadComponent {
private http = inject(HttpClient);
// Upload function passed to ng-files-input
uploadFile = (file: File) => {
const formData = new FormData();
formData.append("file", file);
const req = new HttpRequest("POST", "https://your.api/upload", formData, {
reportProgress: true, // enables progress events
});
return this.http.request(req); // returns Observable>
};
}
```
HTML
```html
```
## ✅ What ng-files-input handles:
- Automatically calls your `uploadFn(file)`
- Tracks `HttpEventType.UploadProgress`
- Emits upload status (optional: via `(uploadProgress)` or `(uploadComplete)` outputs)
## 🧩 Expected Behavior in Library
Internally, your component might do something like:
```ts
uploadFn(file).subscribe((event) => {
if (event.type === HttpEventType.UploadProgress) {
const percent = Math.round((100 * event.loaded) / (event.total ?? 1));
this.progress = percent;
} else if (event.type === HttpEventType.Response) {
this.uploadComplete.emit(event.body);
}
});
```
## 🗂️ Supported File Types
| File Type | Preview Method |
| ----------------------------- | ----------------------------- |
| Images (`.png`, `.jpg`, etc.) | `![]()
` tag |
| PDFs | `` or `` |
| Text files | `
` element |
| Others | ⚠️ Fallback message displayed |
## 🔧 Inputs
| Input | Type | Description |
| --------------------- | -------- | --------------------------------- |
| accept | string | Accepted MIME types or extensions |
| disabled | boolean | Disable file input |
| ngModel / formControl | `Base64` | `null` |
## 🚀 Roadmap
- Drag-and-drop upload
- Multiple file preview
- File validation (type/size)
- Custom preview template slots
## 📄 License
MIT
## 👨💻 Author
Made with ❤️ by [Sanjib Kumar Mandal](https://github.com/sanjib-kumar-mandal)