@iplab/ngx-file-upload

Angular module used for file upload.

Demo

more detailed instructions can be found here

Tested with

• Firefox (latest)
• Chrome (latest)
• Chromium (latest)
• Edge

Compatible with

• Angular 17 (@iplab/ngx-file-upload@version >= 17.0.0)
• Angular 16 (@iplab/ngx-file-upload@version >= 16.0.0)
• Angular 15 (@iplab/ngx-file-upload@version >= 15.0.0)
• Angular 14 (@iplab/ngx-file-upload@version >= 14.0.0)
• Angular 13 (@iplab/ngx-file-upload@version >= 13.0.0)
• Angular 12 (@iplab/ngx-file-upload@version >= 12.0.0)
• Angular 11 (@iplab/ngx-file-upload@version >= 11.0.0)

1with older version of Angular use @iplab/ngx-file-upload@version < 4.0.0

Installing / Getting started

1npm install @iplab/ngx-file-upload

Use the following snippet inside your app module:

1import { ReactiveFormsModule, FormsModule  } from '@angular/forms';
2import { FileUploadModule } from '@iplab/ngx-file-upload';
3import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4...
5...
6
7@NgModule({
8    imports: [
9        BrowserModule,
10        ReactiveFormsModule,
11        FormsModule,
12        FileUploadModule,
13        BrowserAnimationsModule // or use NoopAnimationsModule
14    ],
15    bootstrap: [AppComponent]
16})
17export class AppModule {}

Use the following snippet inside your component:

1import { FileUploadControl, FileUploadValidators } from '@iplab/ngx-file-upload';
2
3
4@Component({
5    selector: `app-root`,
6    template: `<file-upload [control]="fileUploadControl"></file-upload>`
7})
8export class AppComponent {
9
10    public fileUploadControl = new FileUploadControl(null, FileUploadValidators.filesLimit(2));
11
12    constructor() {
13    }
14}

With angular reactive form you can use the following snippet:

1import { FileUploadValidators } from '@iplab/ngx-file-upload';
2
3
4@Component({
5    selector: `app-root`,
6    template: `
7    <form [formGroup]="demoForm">
8        <file-upload formControlName="files"></file-upload>
9    </form>`
10})
11export class AppComponent {
12
13    private filesControl = new FormControl(null, FileUploadValidators.filesLimit(2));
14  
15    public demoForm = new FormGroup({
16        files: this.filesControl
17    });
18
19    constructor() {
20    }
21}

With angular template driven form you can use the following snippet:

1@Component({
2    selector: `app-root`,
3    template: `
4    <form #demoForm="ngForm">
5        <file-upload [(ngModel)]="uploadedFiles" name="files" fileslimit="2"></file-upload>
6    </form>`
7})
8export class AppComponent {
9
10    public uploadedFiles: Array<File> = [];
11}

Developing

Built With:

• Angular
• RxJS

Setting up Dev

This project was generated with Angular CLI version 16.0.0.

Angular CLI must be installed before building @iplab/ngx-file-upload project.

1npm install -g @angular/cli

1git clone https://github.com/pIvan/file-upload.git
2cd file-upload/
3npm install
4npm run start

Open "http://localhost:4200" in browser

Versioning

We use SemVer for versioning. For the versions available, see the link to tags on this repository.

Tests

This project was generated with Angular CLI version 16.0.0.

Angular CLI must be installed before testing @iplab/ngx-file-upload project.

1npm install -g @angular/cli

1git clone https://github.com/pIvan/file-upload.git
2cd file-upload/
3npm install
4npm run test

Contributing

Want to help?

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our contributing guide and then check out one of our issues.

Licensing

@iplab/ngx-file-upload is freely distributable under the terms of the MIT license.