# ngx-file-upload-demo

> > Angular module used for file upload.

Latest version **0.0.1** (published 2022-01-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-file-upload-demo
pnpm add ngx-file-upload-demo
yarn add ngx-file-upload-demo
bun add ngx-file-upload-demo
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-01-20 |
| First published | 2022-01-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 47.3 MB |
| Known vulnerabilities | 0 (+21 in 4 direct dependencies) |
| Install scripts | no |
| Author | Ivan Pintar |
| Maintainers | avssolutions |

## Links

- npm: https://www.npmjs.com/package/ngx-file-upload-demo
- npm.io page: https://npm.io/package/ngx-file-upload-demo

## Dependencies (13)

- [rxjs](https://npm.io/package/rxjs.md) ~6.6.3
- [tslib](https://npm.io/package/tslib.md) ^2.3.1
- [zone.js](https://npm.io/package/zone.js.md) ~0.11.4
- [bootstrap](https://npm.io/package/bootstrap.md) 4.3.1
- [@angular/core](https://npm.io/package/@angular/core.md) ~13.0.2
- [@angular/forms](https://npm.io/package/@angular/forms.md) ~13.0.2
- [@angular/common](https://npm.io/package/@angular/common.md) ~13.0.2
- [@angular/router](https://npm.io/package/@angular/router.md) ~13.0.2
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ~13.0.2
- [@angular/animations](https://npm.io/package/@angular/animations.md) ~13.0.2
- [google-code-prettify](https://npm.io/package/google-code-prettify.md) 1.0.5
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ~13.0.2
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ~13.0.2

## Recent versions

- 0.0.1 (latest) — 2022-01-20

## README

# @iplab/ngx-file-upload
> Angular module used for file upload.



[![npm version](https://badge.fury.io/js/%40iplab%2Fngx-file-upload.svg)](https://www.npmjs.com/package/@iplab/ngx-file-upload)
[![Build Status](https://travis-ci.com/pIvan/file-upload.svg?branch=master)](https://travis-ci.org/pIvan/file-upload)



# Demo
more detailed instructions can be found
[here](https://pivan.github.io/file-upload/)


# Tested with

- Firefox (latest)
- Chrome (latest)
- Chromium (latest)
- Edge
- IE9-IE11

## Installing / Getting started


```shell
npm install @iplab/ngx-file-upload
```

```shell
This libraty is prepared to use without BrowserAnimationModule, because have issues with canvas
```


Use the following snippet inside your app module: 
```shell
import { ReactiveFormsModule, FormsModule  } from '@angular/forms';
import { FileUploadModule } from '@iplab/ngx-file-upload';
...
...

@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        FormsModule,
        FileUploadModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}
```

Use the following snippet inside your component: 
```shell
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: 
```shell
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: 
```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 11.0.0.

[Angular CLI](https://github.com/angular/angular-cli) must be installed before building @iplab/ngx-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 11.0.0.


[Angular CLI](https://github.com/angular/angular-cli) must be installed before testing @iplab/ngx-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

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

---
_Source: https://npm.io/package/ngx-file-upload-demo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._