How can i send cropped image to server ??

[Ok9xNirab]

How can i send cropped image to server ??

formData logs empty .

here is code :

<VueCropper ref="cropper" :src="image" :guides="true" alt="Source Image"></VueCropper>

this.$refs.cropper.getCroppedCanvas().toBlob(function (blob) {
          let formData = new FormData()
          // Add name for our image
          formData.append("name", "image-name-" + new Date().getTime())
          // Append image file
          console.log(formData.append("file", blob));
          console.log(formData);
        })

blob return undefined

[Agontuk]

Not sure what the issue is, code looks fine to me. I'll check and let you know if I find anything.

[ghonchesefidi]

I just tested this code and he is right. blob return undefined.

[FrenchGithubUser]

I had the same issue and here is what I did (based on the mdn docs ) :

      this.newCroppedPP = this.$refs.cropper.getCroppedCanvas();
      var that = this;
      this.newCroppedPP.toBlob(function (blob) {
        that.newPP = URL.createObjectURL(blob);
        that.newCroppedPPFile = blob;
      });
      this.isCropping = false;

So you end up with a blob and an url to display the image on your page with an img tag.