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

caffeinescript caffeinescript · Accepted Answer · 2016-12-07T06:56:30

I wrote a hack for a workaround. Put an input in the html and then grabbed it with an onlick handler

import React from 'react';
import TinyMCE from 'react-tinymce';


class Editor extends React.Component{

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


    render(){

        return(
            <div>
            <input id="my-file" type="file" name="my-file" style={{display:"none"}} onChange="" />

            <TinyMCE
                content="<p>This is the initial content of the editor</p>"

              config={{
                //   selector: '.post-article #' + editorId,
              height: 400,
              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',
              content_css: '//www.tinymce.com/css/codepen.min.css',
              file_browser_callback_types: 'image',
              file_picker_callback: function (callback, value, meta) {
                if (meta.filetype == 'image') {
                    var input = document.getElementById('my-file');
                    input.click();
                    input.onchange = function () {
                        var file = input.files[0];
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            console.log('name',e.target.result);
                            callback(e.target.result, {
                                alt: file.name
                            });
                        };
                        reader.readAsDataURL(file);
                    };
                }
            },
              paste_data_images: true,

              }}

              onChange={this.handleEditorChange}
            />
        </div>

        )
    }
}

export default Editor

TinyMCE editor with React Cannot access local files

2 Answers