@iplab/ngx-file-upload

@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)

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

Installing / Getting started

npm install @iplab/ngx-file-upload

Use the following snippet inside your app module:

import { ReactiveFormsModule, FormsModule  } from '@angular/forms';
import { FileUploadModule } from '@iplab/ngx-file-upload';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
...

@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        FormsModule,
        FileUploadModule,
        BrowserAnimationsModule // or use NoopAnimationsModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

Use the following snippet inside your component:

import { FileUploadControl, FileUploadValidators } from '@iplab/ngx-file-upload';


@Component({
    selector: `app-root`,
    template: `<file-upload [control]="fileUploadControl"></file-upload>`
})
export class AppComponent {

    public fileUploadControl = new FileUploadControl(null, FileUploadValidators.filesLimit(2));

    constructor() {
    }
}

With angular reactive form you can use the following snippet:

import { FileUploadValidators } from '@iplab/ngx-file-upload';


@Component({
    selector: `app-root`,
    template: `
    <form [formGroup]="demoForm">
        <file-upload formControlName="files"></file-upload>
    </form>`
})
export class AppComponent {

    private filesControl = new FormControl(null, FileUploadValidators.filesLimit(2));
  
    public demoForm = new FormGroup({
        files: this.filesControl
    });

    constructor() {
    }
}

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

@Component({
    selector: `app-root`,
    template: `
    <form #demoForm="ngForm">
        <file-upload [(ngModel)]="uploadedFiles" name="files" fileslimit="2"></file-upload>
    </form>`
})
export class AppComponent {

    public uploadedFiles: Array<File> = [];
}

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.

npm install -g @angular/cli

git clone https://github.com/pIvan/file-upload.git
cd file-upload/
npm install
npm 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.

npm install -g @angular/cli

git clone https://github.com/pIvan/file-upload.git
cd file-upload/
npm install
npm 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.

Changelog

18.1.0 (2024-11-26)

Bug Fix

• Value changes - preventing valueChanges event emit on model->view update

Features

• signals - New signals implemented

<a name="18.0.0"></a>