Using cropper with ng-file-upload

Question

I'm using ng-file-upload to preview and upload an image. Before I upload the image I'd like to have the user crop the image. I tried using ng-img-crop, but that didn't have the features I wanted (aspect ratio customization), but cropper did (https://github.com/fengyuanchen/cropper/). My only problem now is how can I crop a preview of an image using cropper. The image src ends up being a blob ie "blob:XYZ". Has anyone successfully used cropper in this way? Is it possible?

Answer 1

1. Save the blob you get from this.cropper.getCroppedCanvas().toBlob() by attaching it to the state.
2. Pass the saved blob to the File constructor within the save() function by pushing it to the first parameter fileBits
3. Handle the upload on the backend with a help of multer

Component

import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { default as Cropper } from 'cropperjs';
import { FileItem, FileUploader } from 'ng2-file-upload';
import { UserService } from '../services/user.service';
import { User } from '../models/core';

@Component({
  selector: 'app-image-cropper',
  templateUrl: './image-cropper.component.html',
  styleUrls: ['./image-cropper.component.scss']
})
export class ImageCropperComponent implements OnInit, AfterViewInit, OnDestroy {


  @ViewChild('imageElement', {static: false})
  public imageElement: ElementRef;

  @Input()
  public imageSource: string;

  public imageBlob: Blob;
  public uploader: FileUploader;
  private cropper: Cropper;

  public constructor(private userService: UserService) {}

  public ngAfterViewInit() {
    this.cropper = new Cropper(this.imageElement.nativeElement, {
      zoomable: false,
      scalable: false,
      responsive: true,
      autoCropArea: 1,
      aspectRatio: 1,
      viewMode: 1,
      crop: (event) => {
        this.cropper.getCroppedCanvas().toBlob((blob) => {
          this.imageBlob = blob;
          console.log('Crop saved as a Blob');
        });
      }
    });
  }

  public save() {
    const date: number = new Date().getTime();
    // Put the blob into the fileBits array of the File constructor
    const file = new File([this.imageBlob], 'photo', {type: 'image/png', lastModified: date});
    const fileItem = new FileItem(this.uploader, file, {});
    this.uploader.queue.push(fileItem);
    fileItem.upload();
  }

  ngOnInit() {
    this.userService.user$.subscribe((user: User) => {
      this.uploader = new FileUploader({url: '/api/profile/' + user.username + '/avatar', itemAlias: 'photo'});
      this.uploader.onAfterAddingFile = (file) => {
        file.withCredentials = false;
      };
      this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
        console.log(response);
      };
    });
  }

  ngOnDestroy(): void {
    this.imageBlob = undefined;
    this.imageSource = '';
  }

}

Component template

<div class="modal-content">
  <div class="modal-header">
    <p class="modal-title font-weight-bold" id="crop-modal-title"><i></i>Crop</p>
    <button type="button" class="close" data-dismiss="modal"
            (click)="activeModal.close('Close click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

    <div class="img-container">
      <img #imageElement [src]="imageSource" crossorigin>
    </div>
    <button type="button" class="button button-primary"
            (click)="save()">
    </button>
  </div>
</div>

Node Controller

import { Request, Response, Router } from 'express';
import * as util from 'util';
import * as fs from 'fs';
import * as multer from 'multer';

Router.post('/profile/:username/avatar/', upload.single('photo'), async (req: Request, resp: Response) => {
    try {
        console.log(req.file);
        // Do something with the uploaded file here
        const fsUnlinkPromisified = (util as any).promisify(fs.unlink);
        await fsUnlinkPromisified(req.file.path);
    } catch (error) {
        console.log(error);
        return resp.send({
            msg: 'Upload failed',
            status: 400
        });
    }
});