# pdeio-ngx-file-uploader

> This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.3. This library uploads images/audio files to a server. In request formdata you can add following: - custom HttpHeaders (if you have to send an XSRF-TOKEN

Latest version **0.0.1** (published 2021-03-18) · 0 weekly downloads

## Install

```sh
npm install pdeio-ngx-file-uploader
pnpm add pdeio-ngx-file-uploader
yarn add pdeio-ngx-file-uploader
bun add pdeio-ngx-file-uploader
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2021-03-18 |
| First published | 2021-03-18 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 160.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | pdeio |

## Links

- npm: https://www.npmjs.com/package/pdeio-ngx-file-uploader
- npm.io page: https://npm.io/package/pdeio-ngx-file-uploader

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 0.0.1 (latest) — 2021-03-18

## README

# PdeioNgxFileUploader

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.3.
This library uploads images/audio files to a server. In request formdata you can add following:
 - custom HttpHeaders (if you have to send an XSRF-TOKEN for example), 
 - extra fields

# Tutorial

app.module

```
...
import { HttpClientModule } from '@angular/common/http';
import { PdeioNgxFileUploaderModule } from 'pdeio-ngx-file-uploader';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    HttpClientModule,
    PdeioNgxFileUploaderModule
    /*
        or change its server config defaults
        PdeioNgxFileUploaderModule.forRoot({
            postMaxSize: 128,
            maxUploads: 50,
            maxFileSizeInMB: 6,
            multiplePreview: false,
    })
    */
  ],
  ...
})
export class AppModule { }

```

app.component.html

```
<!-- with bootstrap classes -->
<div class="container">
  <button class="btn btn-warning" (click)="fileUploader.openFileDialog()" type="button">choose photos</button>
  <button class="btn btn-success" (click)="onSave();" type="button">save</button>

  <file-uploader #fileUploader (uploadingStatus)="sendNotification($event)"></file-uploader>

  <!-- Preview Image -->
  <div class="mt-5" *ngIf="fileUploader.previewImage">
    <img src="{{fileUploader.previewImage}}" alt="">
    <h1> {{ status }} </h1>
  </div>

</div>


```

app.component.ts

```
...
import { PdeioNgxFileUploaderComponent } from 'pdeio-ngx-file-uploader';
...

export class AppComponent {
  status: string;
  @ViewChild('fileUploader', { static: true })
  fileUploader: PdeioNgxFileUploaderComponent;
  constructor() {}

  onSave() {
    const url = 'https://example.com/api/user/images';

    /* OPTIONAL */
    const headers = new HttpHeaders({
      Accept: 'application/json',
      'X-Requested-With': 'XMLHttpRequest',
      'X-XSRF-TOKEN': 'XSRF-TOKEN-HERE',
    });

    /* OPTIONAL */
    const extraFields = [
      {
        name: 'id',
        value: 1,
      },
      {
        name: 'type',
        value: 'images',
      },
      ...
    ];

    this.fileUploader.onSave(url, headers, extraFields);
  }

  sendNotification(event: { event: string; progress?: number }) {
    switch (event.event) {
      case 'started':
        this.status = 'Started uploading';
        break;
      case 'uploading':
        this.status = 'uploading ' + event.progress + '%';
        break;
      case 'finished':
        this.status = 'everything was uploaded';
        break;
      case 'failed':
        this.status = 'Ops.. We have a problem';
        break;
    }
  }
}


```

will send to server, formdata like this

```
id: 1
type: images
files[0]: (binary)
...

```

# FileUploader INPUT parameters

```
  @Input() multiple = false; // enable/disable multi files selection
  @Input() fileType: 'image' | 'audio' = 'image';

```

# FileUploader OUTPUT events

```
  @Output() readyToUpload = new EventEmitter<boolean>(); // true | false
  @Output() uploadingStatus = new EventEmitter<{event: string, progress ?: number}>(); // progress : 0 - 100
  @Output() saved = new EventEmitter<boolean>(); // true | false

```

# Public methods

```
  ---soon---

```

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