Nachos Preventing Motivation

    @iplab/ngx-file-upload
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.1 • Public • Published

    @iplab/ngx-file-upload

    Angular module used for file upload.

    npm version Build Status

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

    Install

    npm i @iplab/ngx-file-upload

    DownloadsWeekly Downloads

    3,927

    Version

    3.3.1

    License

    MIT

    Unpacked Size

    1.1 MB

    Total Files

    92

    Last publish

    Collaborators

    • ipintar