How to pass crop image in form?

[RenukaB30]

I have used your crop code in my project, cropping image is showing fine. But how to upload the cropped image via api?

How to pass crop image in form ?
Please help!

[tkehayov]

You can convert cropped image to BLOB and bind result to FormData and send result via http.
blob convert example:

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

      var blob = new Blob([ab], { type: mimeString });
      return blob;
    }

and sending via http

vm.uploadImage = function() {
      var formData = new FormData();
      var croppedImage = dataURItoBlob(vm.myCroppedImage);

      formData.set("file", croppedImage, fileName);
      $http.post("/image", formData, {
        transformRequest: angular.identity,
        headers: {
          'Content-Type': undefined
        }
      }));
    }

Hope this help. :)

[RenukaB30]

Yes, Thanks. its working fine. :)

[starsoheil2007]

Hi @tkehayov

I got this error

Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

When run this function (dataURItoBlob) ;

Can you help me ?