How to get the base64 image from TUI Image Editor?

[AWorkingGuy]

Hello im new'ish in using and editing api's and im a bit stumped on TUI's Image Editor.

I'm trying to get the image data as a variable so that I can upload it separately to a website instead of just downloading it to the computer.

I am using this person's version of tui. I tried other methods as well but they didn't quite worked out for me.

     const imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
        includeUI: {
          loadImage: {
            path: 'img/sampleImage2.png',
            name: 'SampleImage',
          },
          theme: blackTheme, // or whiteTheme
          initMenu: 'filter',
          menuBarPosition: 'bottom',
        },
        cssMaxWidth: 700,
        cssMaxHeight: 500,
        usageStatistics: false,
      });
      window.onresize = function () {
        imageEditor.ui.resizeEditor();

}   
document.querySelector('#downloadButton').addEventListener('click', () => {
  const myImage = instance.toDataURL();
  document.getElementById("url").innerHTML = myImage; 
});
 </script>

 <p id="url">Test</p>

[AWorkingGuy]

Tried to change the code by using other guides but now it shows this error

Changed code

var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
    includeUI: {
        loadImage: {
            path: 'img/sampleImage2.png',
            name: 'SampleImage',
        },
        theme: blackTheme,
        initMenu: 'filter',
        menuBarPosition: 'left'
    },
    cssMaxWidth: 700,
    cssMaxHeight: 1000,
    usageStatistics: false
});

window.onresize = function() {
    imageEditor.ui.resizeEditor();
}

function dataURLtoBlob(dataurl) {
    var 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 Blob([u8arr], {type:mime});
}

jQuery(document).ready(function ($) {

    $('.tui-image-editor-download-btn').on('click', function (e) {

        var blob = dataURLtoBlob(imageEditor.toDataURL());

        var formData = new FormData();
        formData.append('croppedImage', blob, 'sampleimage.png');

        $.ajax({
            url: '/files/upload_files/', // upload url
            method: "POST",
            data: formData,
            success: function (data) {
                alert('UPLOADED SUCCESSFULLY, PLEASE TRY AGAIN...');
            },
            error: function(xhr, status, error) {
                alert('UPLOAD FAILED, PLEASE TRY AGAIN...');
            }
        });
        return false;
    });
});

    </script>

[RKTZ]

Try to add contentType: false, processData: false, to your ajax options.

[AWorkingGuy]

Hey, thanks for the help! it now shows the popup correctly but when checking the folders there aren't any files being uploaded, do you know why it's like that?

jQuery(document).ready(function ($) {

    $('.tui-image-editor-download-btn').on('click', function (e) {

        var blob = dataURLtoBlob(imageEditor.toDataURL());

        var formData = new FormData();
        formData.append('croppedImage', blob, 'sampleimage.png');

        $.ajax({
            contentType: false, 
            processData: false,
            url: 'files/upload_files/', // upload url
            method: "POST",
            data: formData,
            success: function (data) {
                alert('UPLOADED SUCCESSFULLY, PLEASE TRY AGAIN...');
            },
            error: function(xhr, status, error) {
                alert('UPLOAD FAILED, PLEASE TRY AGAIN...');
            }
        });
        return false;
    });
});

[RKTZ]

Once your file is sent to the server, the backend have to take care of the rest. The next step is to extract the data from the request and to save it somewhere.