angular-upcrop

angular-upcrop

Library with upload and crop feature for Angular 4+

How to use

1- Install angular-upcrop

$ npm install angular-upcrop --save

2- Add angular-upcrop to the module you want to use, for example: AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

//
// Import and load UpcropModule
import { UpcropModule } from 'angular-upcrop';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    //
    // Load UpcropModule
    UpcropModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3- Now you need to create an action for some button inside your component and trigger the open method in UpcropService

**Import UpcropService in the component you want to use, for example: AppComponentModule, add to the providers section then create an action to trigger open()

//
// Import the service
import { UpcropService } from 'angular-upcrop';

@Component({

  ...

  //
  // Add UpcropService to the component providers
  providers: [UpcropService],

  ...
})
export class AppComponentModule { 

  ...

  //
  // Create a method in the component to trigger upcrop
  openUpcrop() {

    // 
    // Set config for dialog, upload and crop components
    let dialogConfig = {};
    let uploadConfig = {
        url: environment.api + 'products/models/upload',
        additionalParameter: {}
    };
    let cropConfig = {};

    // 
    // Open upcrop dialog
    this.upcropService.open(dialogConfig, uploadConfig, cropConfig).then((data) => {

        // 
        // Data will contain an array with the images
        data;
    }).catch((err) => {
    });
  }

  ...

}

Now you just need to call the openUpcrop method you've created

<button (click)="openUpcrop()">Open upcrop</button>

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © Matheus Davidson