ang4-image-upload v1.1.99

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

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:

###Events:

###Triggering events from your component:

###Upload Progress:

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

#DEMO

Detailed Example and Demo coming soon.