https://github.com/danielzotti/ng-filemanager
A simple but completely customizable file manager for angular (IE version >= 10)
https://github.com/danielzotti/ng-filemanager
angular filemanager typescript
Last synced: about 2 months ago
JSON representation
A simple but completely customizable file manager for angular (IE version >= 10)
- Host: GitHub
- URL: https://github.com/danielzotti/ng-filemanager
- Owner: danielzotti
- License: mit
- Created: 2019-03-11T15:27:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T10:24:35.000Z (over 3 years ago)
- Last Synced: 2025-10-11T09:31:05.588Z (9 months ago)
- Topics: angular, filemanager, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@danielzotti/ng-filemanager
- Size: 1.67 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @danielzotti/ng-filemanager
Fully customizable multiple file input for Angular with >= IE10 browser support (remember to activate polyfills in `polyfills.ts`!)
- [Live demo](https://danielzotti.github.io/ng-filemanager)
- [NPM](https://www.npmjs.com/package/@danielzotti/ng-filemanager)
- Try it yourself:
- Run `npm install`
- Run `npm run start` for a dev server
- Navigate to `http://localhost:4200/`
# How to use it
## Install the package
Run `npm i @danielzotti/ng-filemanager --save`
## Import the module
Import `NgFilemanagerModule` from `@danielzotti/ng-filemanager` in `app.module.ts`
```typescript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { NgFilemanagerModule } from "@danielzotti/ng-filemanager";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, NgFilemanagerModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
## Use it in a component
### Basic template
- Easy to use
- No validation or file size/number limitation
```html
Submit
```
### Completely customizable UI and validation
#### validation
- min file number `min`
- max file number `max`
- max total file size `maxFileSize`
- disabled input when uploading `isLoading`
- custom errors [`exactFileNumber`,`minFileNumber`,`maxFileNumber`,`minFileSize`]
#### UI
- browse file custom text `selectText`
- browse file custom icon `selectIcon`
- delete all files custom text `deleteAllText`
- delete all files custom icon `deleteAllIcon`
- delete single file custom icom `deleteIcon`
```html
Browse files
Delete all files
```
#### Style
```scss
.ng-filemanager__container {
// the ng-filemanager input container
}
.ng-filemanager__input {
// the real input file (should be hidden)
// "display: none" already set in ng-filemanager component css
}
.ng-filemanager__buttons-container {
// "browse" and "delete all" container
}
.ng-filemanager__button {
// "browse" and "delete all" button
}
.ng-filemanager__button__icon {
// "browse" and "delete all" button icon
}
.ng-filemanager__file-list {
// container of all uploaded files
}
.ng-filemanager__file {
// single file item
}
.ng-filemanager__file__button {
// single file "delete" button
}
.ng-filemanager__file__button__icon {
// single file button icon
}
```
### How to manage file upload in typescript component
```typescript
onSubmitFiles(form: NgForm) {
// manage form validation
if (form.invalid) {
alert('Form invalid! See console log for details');
console.log('Form invalid', form);
return false;
}
this.isUploadingFiles = true;
const formData: FormData = new FormData();
const files = form.value.files;
// add other form input data to formData
formData.append('payload', JSON.stringify({ customJsonProperty: 'customValue' }));
// add every single file to formData
if (typeof files !== 'undefined' && files != null && files.length > 0) {
for (let i = 0; i < files.length; i++) {
formData.append('file' + i, files[i].browserFile);
}
}
const fakeUrl = 'http://www.mocky.io/v2/5c87748e320000d9123bd1fb';
this.http.post(fakeUrl, formData).subscribe(res => {
this.isUploadingFiles = false;
alert('Done! See network details in developer console (Header of https://www.mocky.io/v2/5c87748e320000d9123bd1fb)');
form.reset();
});
}
```