Package Exports

@iplab/ngx-file-upload

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@iplab/ngx-file-upload) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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
IE9-IE11

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(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 6.0.7.

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 6.0.7.

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.