TinyMCE editor with React Cannot access local files

Question

Im using the tinyMCE editor plugin with react js. Im trying to upload files from my local machine to the editor and then to s3. I can drag and drop photos into the editor, however, when I click insert photo button i cannot gain access to my file system. Any suggestions?

class Editor extends React.Component{

    handleEditorChange = (e) => {
        console.log('e',e);
        console.log('Content was updated:', e.target.getContent());
    }


    render(){
        return(
            <TinyMCE
                content="<p>This is the initial content of the editor</p>"

              config={{
                height:600,
                paste_data_images: true,
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace wordcount visualblocks code fullscreen',
                    'insertdatetime media table contextmenu paste code'
                  ],
                  toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',                file_picker_types: 'file image media',
                paste_data_images:true,
                file_browser_callback_types: 'image',
                images_upload_handler: function (blobInfo, success, failure) {
                    console.log('blobInfo',blobInfo);
            },

                selector: 'textarea',  // change this value according to your HTML
                file_picker_callback: function(callback, value, meta) {
                if (meta.filetype == 'file') {
                    //callback('mypage.html', {text: 'My text'});
                }
                if (meta.filetype == 'image') {

                }
                if (meta.filetype == 'media') {
                    //callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
                    }
                }
              }}

              onChange={this.handleEditorChange}
            />

        )
    }
}

export default Editor

Answer 1

This is my updated code. version "@tinymce/tinymce-react": "^3.13.0"

import React, { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";

export default function App() {
  const editorRef = useRef(null);
  const log = () => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
  };
  return (
    <>
      <div style={{ marginTop: 20 }}>
        <Editor
          apiKey="your api key"
          onInit={(evt, editor) => {
              editorRef.current = editor
          }}
          initialValue="<p>This is the initial content of the editor.</p>"
          init={{
            height: 300,
            menubar: true,
            /* enable title field in the Image dialog*/
            image_title: true,
            plugins: [
              "advlist autolink lists link image charmap print preview anchor",
              "searchreplace visualblocks code fullscreen",
              "insertdatetime media table paste image code help wordcount",
            ],
            toolbar:
              "undo redo | formatselect | " +
              "bold italic backcolor | alignleft aligncenter " +
              "alignright alignjustify | bullist numlist outdent indent | " +
              "removeformat | help",
            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 = editorRef.current.editorUpload.blobCache;
                  var base64 = reader.result.split(",")[1];
                  var blobInfo = blobCache.create(id, file, base64);
                  blobCache.add(blobInfo);

                  /* call the callback and populate the Title field with the file name */
                  cb(blobInfo.blobUri(), { title: file.name });
                };
                reader.readAsDataURL(file);
              };
              input.click();
            },
            content_style:
              "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
          }}
        />
        <button onClick={log}>Log editor content</button>
      </div>
    </>
  );
}

Answer 2

class Editor extends React.Component{

    handleEditorChange = (e) => {
        console.log('e',e);
        console.log('Content was updated:', e.target.getContent());
    }


    render(){
        return(
            <TinyMCE
                content="<p>This is the initial content of the editor</p>"

              config={{
                image_advtab: true,
                height:600,
                paste_data_images: true,
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace wordcount visualblocks code fullscreen',
                    'insertdatetime media table contextmenu paste code'
                  ],
                  toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',                file_picker_types: 'file image media',
                paste_data_images:true,
                file_browser_callback_types: 'image',
                images_upload_handler: function (blobInfo, success, failure) {
                    console.log('blobInfo',blobInfo);
            },

                selector: 'textarea',  // change this value according to your HTML
                file_picker_callback: function(callback, value, meta) {
                if (meta.filetype == 'file') {
                    //callback('mypage.html', {text: 'My text'});
                }
                if (meta.filetype == 'image') {

                }
                if (meta.filetype == 'media') {
                    //callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
                    }
                }
              }}

              onChange={this.handleEditorChange}
            />

        )
    }
}

export default Editor

you needed image_advtab: true, it allows you to open file explorer or drag to its input in tinymce docs