how to send image to backend

[ali asghar]

hi
i wonder how i can send the final image to backend for store
anyone can help?

[dhufish]

I am curious about possible solutions on this also. If possible it would dramatically improve work flow for users.

[Sergiu Vidreanu]

I got the dataURL of the image using the invoke method

this.$refs.tuiImageEditor.invoke("toDataURL")

then converted the dataURL to a File using this solution and sent it to the backend appending the file into a form data.

save() {
      let file = this.dataURLtoFile(
        this.$refs.tuiImageEditor.invoke("toDataURL"),
        "test.png"
      );

      let body = new FormData();
      body.append("file", file);

      //Here your request to the backend
},

dataURLtoFile(dataurl, filename) {
      let arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }

      return new File([u8arr], filename, { type: mime });
}

[apebk]

Where did you place the
this.$refs.tuiImageEditor.invoke("toDataURL")
Is it called from the download button?

[Sergiu Vidreanu]

I made an external button that calls the "save" function, then inside it you can see how i used this.$refs.tuiImageEditor.invoke("toDataURL")