npm package: @olly.john/file-upload
Description: ## Tested with... - Chrome (latest) - Chromium (latest) - Edge - IE9-IE11
Author: Olly John
Latest version: 3.0.0

# @olly.john/file-upload

## Tested with...
- Chrome (latest)
- Chromium (latest)
- Edge
- IE9-IE11

## Installing / Getting started


```shell
npm install @olly.john/file-upload
```

Use the following snippet inside your app module: 
```shell
import { ReactiveFormsModule, FormsModule  } from '@angular/forms';
import { FileUploadModule } from '@olly.john/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: 
```shell
import { FileUploadControl, FileUploadValidators } from '@olly.john/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: 
```shell
import { FileUploadValidators } from '@olly.john/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: 
```shell
@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](https://github.com/angular/angular-cli) version 8.0.0.

[Angular CLI](https://github.com/angular/angular-cli) must be installed before building @olly.john/file-upload project.

```shell
npm install -g @angular/cli
```

```shell
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](http://semver.org/) for versioning. For the versions available, see the [link to tags on this repository](https://github.com/pIvan/file-upload/tags).

## Tests

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.0.


[Angular CLI](https://github.com/angular/angular-cli) must be installed before testing @olly.john/file-upload project.

```shell
npm install -g @angular/cli
```


```shell
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](https://github.com/pIvan/file-upload/blob/master/CONTRIBUTING.md) and then check out one of our [issues](https://github.com/pIvan/file-upload/issues).



## Licensing

@olly.john/file-upload is freely distributable under the terms of the [MIT license](https://github.com/pIvan/file-upload/blob/master/LICENSE).