Problem with image upload

[lokize]

Hi, great plugin work good, but when i try to upload images following this official documentation at the link : https://www.tiny.cloud/docs/demo/file-picker/

i have this problem:

My code of editor is:

`

<editor

      id="file-picker"

      api-key="0pajbv4j9n1qt1w7g5h5x80h8jf4tkfiyykwq32x2llajdft"

      :init="{

        // images_upload_url: '../util/uploadadapter.js',

        language: 'pt_BR',

        max_height: 800,

        max_width: 600,

        min_height: 500,

        min_width: 600,

        plugins: 'lists link image table code help wordcount',
        selector: 'file-picker',
        image_title: true,
        automatic_uploads: true,
        file_picker_types: 'image',
        file_picker_callback: function (cb, value, meta) {
          var input = document.createElement('input');
          input.setAttribute('type', 'file');
          input.setAttribute('accept', 'image/*');
          input.onchange = function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function () {
              var id = 'blobid' + new Date().getTime();
              var blobCache = tinymce.activeEditor.editorUpload.blobCache;
              var base64 = reader.result.split(',')[1];
              var blobInfo = blobCache.create(id, file, base64);
              blobCache.add(blobInfo);
              cb(blobInfo.blobUri(), { title: file.name });
            };
            reader.readAsDataURL(file);
          };

          input.click();
        },
        content_style:
          'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
      }"
    />`

Thanks!

[exalate-issue-sync[bot]]

Ref: INT-2889

[folamy]

@lokize, @ Before any major fix to this issue, I have got a clean hack for you.

<script setup lang="ts">
import { ref } from 'vue
import { Editor } from '@tinymce/tinymce-vue'

let tinyMce = ref(null)
// Your init object for the Editor
const init = {
  language: 'pt_BR',
  
  max_height: 800,
  
  max_width: 600,
  
  min_height: 500,
  
  min_width: 600,
  
  plugins: 'lists link image table code help wordcount',
  selector: 'file-picker',
  image_title: true,
  automatic_uploads: true,
  file_picker_types: 'image',
  file_picker_callback: function (cb, value, meta) {
  var input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  input.onchange = function () {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function () {
      var id = 'blobid' + new Date().getTime();

      // So we are using the tinyMce here
      // @ts-expect-error missing types
      var blobCache = tinyMce.editorManager.activeEditor.editorUpload.blobCache;
      var base64 = reader.result.split(',')[1];
      var blobInfo = blobCache.create(id, file, base64);
      blobCache.add(blobInfo);
      cb(blobInfo.blobUri(), { title: file.name });
    };
    reader.readAsDataURL(file);
  };
  
  input.click();
  },
  content_style:
  'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',

  // At this point we are changing the value of tinyMce from 'null' to the actrual tinymce object
  // And the good thing is this event happens the moment when the component is being activated
  setup: (editorObject) => {
    tinyMce = editorObject
  }
}
</script>
<template>
   <Editor
      :init="init"
       v-model="yourContentValue"
   />
</template>

I'm currently using this, and it works perfectly for me

[jscasca]

@lokize just checking if @folamy 's answer fixed your issue?

Happy to reopen this issue if the provided workaround is not enough

[lokize]

first I apologize for not being able to interact and test the dear friend's solution earlier, thank you very much for your help and I would like to say that everything seems to have worked perfectly so far!

@folamy thank you very much!