# ang4-image-upload > # Introduction An angular module for file uploads. Works great with images. Latest version **1.1.99** (published 2019-01-09) · ISC license · 0 weekly downloads ## Install ```sh npm install ang4-image-upload pnpm add ang4-image-upload yarn add ang4-image-upload bun add ang4-image-upload ``` ## 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.1.99 | | Published | 2019-01-09 | | First published | 2019-01-06 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 25 | | Unpacked size | 133.7 KB | | Known vulnerabilities | 0 (+27 in 5 direct dependencies) | | Install scripts | no | | Maintainers | rmoubayed | ## Links - npm: https://www.npmjs.com/package/ang4-image-upload - 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/ang4-image-upload ## Dependencies (25) - [del](https://npm.io/package/del.md) 3.0.0 - [npm](https://npm.io/package/npm.md) ^6.4.1 - [pica](https://npm.io/package/pica.md) ^5.0.0 - [pump](https://npm.io/package/pump.md) ^1.0.2 - [rxjs](https://npm.io/package/rxjs.md) ^5.4.2 - [xlsx](https://npm.io/package/xlsx.md) ^0.14.0 - [plunk](https://npm.io/package/plunk.md) ^0.5.1 - [quill](https://npm.io/package/quill.md) ^1.3.6 - [tether](https://npm.io/package/tether.md) ^1.4.3 - [core-js](https://npm.io/package/core-js.md) ^2.4.1 - [tsickle](https://npm.io/package/tsickle.md) ^0.34.0 - [zone.js](https://npm.io/package/zone.js.md) ^0.8.14 - [@angular/cdk](https://npm.io/package/@angular/cdk.md) 2.0.0-beta.11 - [@angular/core](https://npm.io/package/@angular/core.md) 4.3.6 - [@angular/http](https://npm.io/package/@angular/http.md) 4.3.6 - [@angular/forms](https://npm.io/package/@angular/forms.md) 4.4.3 - [@angular/common](https://npm.io/package/@angular/common.md) 4.3.6 - [@angular/router](https://npm.io/package/@angular/router.md) 4.3.6 - [@angular/compiler](https://npm.io/package/@angular/compiler.md) 4.3.6 - [@angular/material](https://npm.io/package/@angular/material.md) 2.0.0-beta.11 - [@angular/animations](https://npm.io/package/@angular/animations.md) 4.3.6 - [@angular-devkit/core](https://npm.io/package/@angular-devkit/core.md) 0.0.29 - [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) 4.3.6 - [@angular-devkit/schematics](https://npm.io/package/@angular-devkit/schematics.md) 0.0.42 - [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) 4.3.6 ## Recent versions - 1.1.99 (latest) — 2019-01-09 - 1.2.0 — 2019-01-09 - 1.1.22 — 2019-01-09 - 1.1.2 — 2019-01-08 - 1.0.26 — 2019-01-07 - 1.0.25 — 2019-01-07 - 1.0.24 — 2019-01-07 - 1.0.23 — 2019-01-07 - 1.0.22 — 2019-01-07 - 1.0.21 — 2019-01-07 - 1.0.20 — 2019-01-07 - 1.0.19 — 2019-01-07 - 1.0.18 — 2019-01-07 - 1.0.17 — 2019-01-07 - 1.0.16 — 2019-01-07 - … 16 more at https://npm.io/package/ang4-image-upload/versions ## README # Angular File Upload Module # Introduction An angular module for file uploads. Works great with images. Currently Tested on Angular 4, Compatibility will be updated soon for other versions. NO LONGER BEING MAINTAINED! I CHANGED THE PACKAGE NAME TO [angular-upload-files](https://www.npmjs.com/package/angular-upload-files) # How To Use ## Installation: ``` npm i angular-upload-files ``` ## Usage: ### 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 will be removed on click | ###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) | | (onFileRemoved) | Event fired when when you remove a file | ###Triggering events from your component: | Event | Description | | --- | --- | | Start Upload | ``` this.uploadService.startUpload.next(files) ``` | | Remove Image | ``` this.uploadService.removeImage.next({id: componentId, index: file/image index}) ``` | | Remove File | ``` this.uploadService.removeFile.next({id: componentId, index: file index}) ``` | | Clear Files | ``` this.uploadService.clearFiles.next({id: componentId}) ``` | ###Upload Progress: ``` this.uploadService.currentUploadProgress.subscribe( (progress)=>{ console.log(progress); } ) ``` #DEMO Detailed Example and Demo coming soon. --- _Source: https://npm.io/package/ang4-image-upload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._