CODEWITHSUNDEEP
javascriptvue.jsfile-uploadcropperjs
Menyten
Menyten

Reputation: 81

How to upload cropped picture with vue-cropper.js?

So I'm using an npm package called vue-cropper.js to crop images and upload the cropped image to a remote server. However the uploading part of the cropped image is not working as all I'm getting is a CORS error. But the thing is, when I upload an image without cropping it, it works and there is no error. I don't understand what I'm doing wrong.

I've checked the cropper.js docs numerous times and all they tell you to do is create a blob and append it to form data and then POST. Again, that's what I'm doing.

Here is my template for the cropper component.


    <vue-cropper
      v-show="imageSrc"
      class="vue-cropper"
      ref="cropper"
      :guides="true"
      :view-mode="1"
      drag-mode="crop"
      :background="true"
      :rotatable="true"
      :aspect-ratio="1"
      :src="imageSrc"
      alt="Image"
    ></vue-cropper>

Here is my code for cropping and uploading.

crop() {
      this.$refs.cropper
        .getCroppedCanvas({
          width: 200,
          height: 200
        })
        .toBlob(blob => {
          const formData = new FormData();
          formData.append("photo", blob, 'avatar');
          this.uploadImage(formData);
        });
    },
    rotate() {
      this.$refs.cropper.rotate(90);
    },
    uploadImage(formData) {
      const token = getCookie("ifragasatt_cookie");
      const url = "https://vem-user.fjardestatsmakten.se/userProfilePic";
      const headers = {
        "Content-Type": "multipart/form-data",
        "Access-Control-Allow-Origin": "*",
        "ifr-jwt-token": token
      };

      axios.post(url, formData, { headers });
    }
  }

I expect to get an "ok" as a response from the endpoint. But I'm getting:

POST https://vem-user.fjardestatsmakten.se/userProfilePic 502

my-profile:1 Access to XMLHttpRequest at 'https://vem-user.fjardestatsmakten.se/userProfilePic'
from origin 'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Upvotes: 1

Views: 5463

Answers (2)

Menyten
Menyten

Reputation: 81

IT WORKS!!!! I had to add .png as to 'avatar'.

Upvotes: 0

nhlinh
nhlinh

Reputation: 121

Does your back-end code had apply cors yet? Because I see Access-Control-Allow-Origin error in POST response. And did you convert image from base64 to blob?

Upvotes: 1

Related Questions