# angular-upload-files

> # Introduction An angular module for file uploads. Works great with images. INSTANTLY GET IMAGE PREVIEW BEFORE UPLOAD (ON FILE SELECT)

Latest version **1.5.303** (published 2019-02-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-upload-files
pnpm add angular-upload-files
yarn add angular-upload-files
bun add angular-upload-files
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.303 |
| Published | 2019-02-15 |
| First published | 2019-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 162.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rmoubayed |

## Links

- npm: https://www.npmjs.com/package/angular-upload-files
- Repository: https://github.com/rmoubayed/angular-upload-files
- Homepage: https://github.com/rmoubayed/angular-upload-files#readme
- Issues: https://github.com/rmoubayed/angular-upload-files/issues
- npm.io page: https://npm.io/package/angular-upload-files

## Dependencies (13)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.2 || ^6.1.0 | ^6.3.0
- [core-js](https://npm.io/package/core-js.md) ^2.6.3
- [tsickle](https://npm.io/package/tsickle.md) 0.33.1
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.29
- [@angular/cdk](https://npm.io/package/@angular/cdk.md) 2.0.0-beta.11
- [@angular/core](https://npm.io/package/@angular/core.md) ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
- [@angular/http](https://npm.io/package/@angular/http.md) ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0

## Recent versions

- 1.5.303 (latest) — 2019-02-15
- 1.5.302 — 2019-02-15
- 1.5.301 — 2019-02-15
- 1.5.3 — 2019-02-15
- 1.5.202 — 2019-02-15
- 1.5.201 — 2019-02-15
- 1.5.2 — 2019-02-15
- 1.5.102 — 2019-02-15
- 1.5.101 — 2019-02-15
- 1.5.1 — 2019-02-15
- 1.5.0 — 2019-02-11
- 1.4.65 — 2019-02-06
- 1.4.6 — 2019-02-06
- 1.4.5 — 2019-02-06
- 1.4.3 — 2019-02-06
- … 28 more at https://npm.io/package/angular-upload-files/versions

## README

# Angular File Upload Module
 

# Introduction
An angular module for file uploads. Works great with images. INSTANTLY GET IMAGE PREVIEW BEFORE UPLOAD (ON FILE SELECT)

Currently Tested on Angular 4+

https://angular-w4tx91.stackblitz.io

# How To Use

## Installation: 

``` npm i angular-upload-files ```

## Usage:

### Quick Example

#### example.component.ts:

```

import { Component, OnInit} from '@angular/core';
import { UploadService, UploadParams } from 'angular-upload-files';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example].component.css']
})
export class ExampleComponent implements OnInit {

  uploadParams : UploadParams;
  progress: string;
  fileCount: number;
  files: any[];

  constructor(private uploadService : UploadService) {}

  ngOnInit() {
    this.uploadParams = {
      formDataPropertyName: 'image', 
      extraParams: [{
        paramValueIsFromFile: true,
        paramValue: "name",
        paramName: "filename"
      }]
    }
    this.uploadService.currentUploadProgress.subscribe(
      (progress)=>{
        console.log(progress);
        this.progress = progress;
      }
    )
  }
  readFiles(event) {
    console.log(event, event.files, event.base64s); //read files from here, and if using images base64s also
    this.fileCount = event.files.length;

    // you can manipulate the files here, or just store them
    this.files = event.files;
  }
  uploadDone(event) {
    console.log(event);
    this.fileCount--;

    if(this.fileCount === 0) {
      //files are COMPLETELY done uploading
    }
  }
}

```

#### example.component.html

``` 

<app-uploader
(onFilesSelected)="readFiles($event)"
(onUploadComplete)="uploadDone($event)"
[buttonText]="'Choose Image'"
[buttonClass]="'btn btn-default'"
[postUrl]="'https://api.imgur.com/3/image'"
[id]="0"
[multiple]="true"
[usingImages]="true"
[showImagesOnAdd]="true"
[imageWidth]="'180px'"
[imagesRemovable]="true"
[imageRemoveType]="'clickOnX'"
[uploadParams]="uploadParams"
[imageContainerDisplay]="'inline-block'"
></app-uploader>

<p>{{progress}}% uploaded</p>



```

### App Module Setup:

``` 
import {UploaderModule} from 'angular-upload-files'; 
```

``` 
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    UploaderModule.forRoot(), // <---------------
    HttpClientModule,
    RouterModule.forRoot(Routes) 
  ],
  providers: [
  ],
  bootstrap: [AppComponent],
}) 
```
### In your component:
```
import { UploadService, UploadParams } from 'angular-upload-files';

constructor(private uploadService : UploadService) { }


```

### Interfaces: 
```
export interface UploadParams {
  formDataPropertyName: string;
  extraParams : ExtraParams[];
}
export interface ExtraParams {
  paramValueIsFromFile: boolean;
  paramName: string;
  paramValue: any;
}
```
You must input a UploadParams object into each instance of the uploader:
``` formDataPropertyName: string; ``` The uploader will automatically append a FormData object with the file and file name attached, as well as the formDataPropertyName (this is how it looks internally):

``` formData.append(this.uploadParams.formDataPropertyName, file, file.name); ``` 

#### Extra Params:

Extra Params is for passing query string parameters to your request:

example: 

```
    this.uploadParams = {formDataPropertyName: 'image', extraParams: {
      paramValueIsFromFile: true, //paramValue will be accessed as file[paramValue] set false for value to be just paramValue
      paramValue: "name",
      paramName: "filename"
    }}
```
```
    this.uploadParams = {formDataPropertyName: 'image', extraParams: {
      paramValueIsFromFile: false, //paramValue will be accessed as paramValue (params.set(paramName, paramValue))
      paramValue: "name",
      paramName: "filename"
    }}
```



### Inputs:

| Input | Description |
| --- | --- |
| uploadParams: UploadParams | See UploadParams description above. |
| buttonText: string |  Set upload button text. |
| buttonClass: string | Set class value. like: "btn btn-primary" |
| id: number | Set uploader id |
| postUrl: string | Uploader target url |
| usingImages: boolean |  Set to true if images (and only images) are being uploaded. |
| showImagesOnAdd: boolean | If usingImages is set to true, images will show in the DOM on add  |
| imageWidth: string | CSS width value. like: "180px"  |
| imagesRemovable: boolean | Images can be removed. |
| imageRemoveType: string |  'clickOnImage' OR 'clickOnX' |
| imageContainerDisplay: string | CSS display property for image container: eg. 'inline', 'inline-block' |



### Events:

| Event | Description |
| --- | --- |
| (onFilesSelected) | event containing {files: files} OR {files: files, base64s: base64ImgUrls} based on 'usingImages' |
| (onUploadComplete) | Event fired on each upload completion containing {response: event, file: file} |
| (onImageRemoved) | Event fired when when you remove an image (usingIMages mode)  |


### Triggering events from your component:

| Event | Description |
| --- | --- |
| Start Upload | ``` this.uploadService.startUpload.next(files) ``` |
| Remove Image | ``` this.uploadService.removeImage.next(index: file/image index}) ``` |
| Clear Images |  ``` this.uploadService.clearImages.next({})``` |

### Triggering events from your component: (MULTIPLE UPLOADERS)

| Event | Description |
| --- | --- |
| Start Upload | ``` this.uploadService.startUpload.next(files) ``` |
| Remove Image | ``` this.uploadService.removeImage.next({id: componentId, index: file/image index}) ``` |
| Clear Images |  ``` this.uploadService.clearImages.next({id: componentId}) ||  this.uploadService.clearImages.next({})``` |


NOTE: You may omit the componentId but all uploaders will receive the sent event if you do so.

### Upload Progress:

```
this.uploadService.currentUploadProgress.subscribe(
    (progress)=>{
        console.log(progress);
    }
)

```

# DEMO

https://angular-w4tx91.stackblitz.io

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