Empty FormData object when converting the canvas to Blob

[roenfeldt]

First off, thank you for this amazing cropper utility and for all the work you 've been doing on improving it.

My ultimate goal is, that I send the image data to a backend API (which is already built and accepting requests properly, but it's irrelevant to this issue).

The problem I'm facing with, is that I can't figure out how to append the cropped image to a FormData object, so that I can further send it over to the API (by the help of a library such as Axios etc.) and store it somewhere.

My code is here: https://codesandbox.io/s/goofy-https-p2cwj

The relevant part is happening within the uploadCroppedImage method, see below:

uploadCroppedImage() {
      const { canvas } = this.$refs.cropper.getResult();

      if (canvas) {
        canvas.toBlob((blob) => {
          let formData = new FormData(); // to submit as a "multipart/form-data" request
          formData.append("image-name", blob);

          /**
           * But now I'm getting an EMPTY Object. WHY?!?
           */
          console.log(formData);

          /**
           * And therefore, I can't use Axios or any other library
           * to send the image over to the server.
           */
        });
      }
    },

What am I doing wrong?

Thank you so much! :)

[Norserium]

@roenfeldt, hello!

It's okay that it's logged empty. You can though iterate it and get it contents:

console.log(blob, [...formData]);

[Norserium]

@roenfeldt, is the issue still actual?

[roenfeldt]

@Norserium as a matter of fact, I'm currently trying to figure out how to actually make use of the actual image data that's included within the iterated FormData object, as per your suggestion. My uploadCroppedImage function looks like this now:

uploadCroppedImage() {
      const { canvas } = this.$refs.cropper.getResult();

      if (canvas) {
        canvas.toBlob((blob) => {
          let formData = new FormData(); // to submit as a "multipart/form-data" request
          formData.append("image-name", blob);

          /**
           * Getting the object's contents as expected.
           */
          console.log(blob, [...formData]);

          /**
           * And therefore, I can't use Axios or any other library
           * to send the image over to the server.
           */
          axios.post(this.uploadImageEndpoint, {
            /** I believe this is where the problem starts, because by inspecting the XHR request parameters,
            * I'm getting {"cropped_imagel":[["image-name",{}]]}
            */
            cropped_image: (blob, [...formData]),
          })
          .then(response => {
            /* The API will simply return the request input data that was sent, nothing fancy. */
            console.log(response.data); // getting [["image-name",[]]]
          })
          .catch(error => {
            console.log('Error when trying to upload the cropped image: ', error);
          });
        }, "image/jpeg", .90);
      }
    },

So my question is now, how could I send the actual image data over to the API?

Many thanks for your help and patience!

[Norserium]

@roenfeldt, actually, I believe you send a form data incorrectly:

axios.post(this.uploadImageEndpoint, formData)

[Norserium]

@roenfeldt, any news?

[roenfeldt]

@Norserium apologies for not replying sooner. Been sidetracked at work... In any case, I'll give it a go and let you know the result later today. But I am almost certain that your suggested solution will work well. Thank you so much for your help! 😊

[roenfeldt]

@Norserium I confirm that now the image data is properly reaching the API, based on your suggestion. Many thanks for the awesome code as well as your stellar support!

On an unrelated side note - is there any way of disabling zooming that's happening during the scrroll event? I'll open another issue if you think my question is "polluting" this one :)

Thank you!

[Norserium]

@roenfeldt, you are welcome! I assume it will be right to create a separate issue (for the other users). Also, I need the codesandbox to reproduce the error or the video at least.

[roenfeldt]

@roenfeldt, you are welcome! I assume it will be right to create a separate issue (for the other users). Also, I need the codesandbox to reproduce the error or the video at least.

Sure thing @Norserium - here's the new issue for reference (for users reading this) https://github.com/Norserium/vue-advanced-cropper/issues/158