Angular image upload

Question

I am trying to use ngx-image-cropper to upload images on my application, but I cannot save the cropped image. For example, if I try to save the main file (the file which is loaded through the input type="file"), everything works fine. In this case, the file is sent like this:

{name: "300_3.jpg", 
lastModified: 1510510128437, 
lastModifiedDate: Sun Nov 12 2017 20:08:48 GMT+0200 (GTB Standard Time), webkitRelativePath: "", 
size: 81972, …}

But if I try to upload the cropped version of the image, the file looks like this:

data:image/png;base64,iVBORw0KGgoAAAANSU............

And the response from the server is something like:

{error: "Bad Request",
exception:"org.springframework.web.multipart.support.MissingServletRequestPartException",
message: "Required request part 'file' is not present",
path: "/api/myEndPoint/",
status: 400,
timestamp: 1518424822285}

So basically I need to send an abject as in the first case, but all I have is a base64 item.

Here is also the HTML code, in case it helps:

<image-cropper
                    [imageChangedEvent]="imageChangedEvent"
                    [maintainAspectRatio]="true"
                    [aspectRatio]="4 / 4"
                    [resizeToWidth]="250"
                    format="png"
                    (imageCropped)="imageCropped($event)"
                    (imageLoaded)="imageLoaded()"
                    (loadImageFailed)="loadImageFailed()"
                    *ngIf="isUploadedFile">
                </image-cropper>

Can someone please advise how may I upload the cropped version and not the initial file I uploaded? Or is this something which needs to be fixed on the server, so it can accept the file I sent? Thanks!

You probably need to convert your base64 data to multipart: See here if it helps. https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata — David, Feb 12 '18 at 09:36

Gregor Doroschenko · Accepted Answer · 2018-02-12T09:47:09.333

That string:

data:image/png;base64,iVBORw0KGgoAAAANSU............

means that you have your cropped image as dataURI. If you want to bring your upload of cropped image to work, then you should convert it from dataURI to Blob. If you have done this, then you can create from Blob an File and upload this to server.

Here is a function for converting dataURI to Blob:

  dataURItoBlob(dataURI): Blob {
    const byteString = atob(dataURI.split(',')[1]);
    const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    const ab = new ArrayBuffer(byteString.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: mimeString });
  }

And now you can create File and upload it to server. Here is an example of uplaod function:

  uploadAttachmentToServer() {
    const fileToUpload: File = new File([this.dataURItoBlob(yourCroppedImage)], 'filename.png');
    this.attachmentService.postAttachment(fileToUpload).subscribe(data => {
      // success, do something
    }, error => {
      // failure, do something
    });
  }

Also consider the use of dataURI, if possible: https://stackoverflow.com/a/6819412/1235935 — Saptarshi Basu, Feb 12 '18 at 09:50

score 2 · Answer 2 · answered Aug 12 '18 at 07:41

Actually ngx-image-cropper provides an attribute imageCroppedFile which gives you the cropped image as converted to Blob, for example in your html:

<image-cropper
                [imageChangedEvent]="imageChangedEvent"
                ...
                (imageCroppedFile)="fileCropped($event)">
</image-cropper>

then in your component you can convert from Blob to File:

fileCropped(blob: Blob) {
    const file = new File([blob], 'image.png');
    // upload the file
}

using version 3.1.9 and can't see "imageCroppedFile" – Darren Street Jun 24 '20 at 14:51 — Darren Street, Jun 24 '20 at 14:51

score 0 · Answer 3 · edited Jan 02 '21 at 05:18

The ngx-image-cropper comes with a base64ToFile function which returns a Blob object.

import { ImageCropperedEvent, base64Tofile } from 'ngx-image-cropper'

and your code should look like:

someFunction(): File {
  // Assuming you have stored the event.base64 in an instance variable 'croppedImage'
  const file: File = new File([base64ToFile(this.croppedImage)], 'fileName.png');
  return file;
}

Angular image upload

3 Answers3