Reputation: 66

unable to upload file using tinymce editor

I'm trying to upload an image using tinymce editor but the script fails and this is the error

tinymce.activeEditor.editorUpload is undefined

Below the JavaScript and HTML code

tinyMCE.init({
    selector: '#editor',
    height: 400,
    theme: 'modern',
    plugins : 'advlist autolink lists link image charmap print preview hr anchor pagebreak image code        searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking save table contextmenu directionality emoticons template paste textcolor colorpicker textpattern spellchecker',
    toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | fontsizeselect',
    toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',

    fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
    // enable title field in the Image dialog
    image_title: true, 
    // enable automatic uploads of images represented by blob or data URIs
    automatic_uploads: true,
    file_picker_types: 'file image media',
    // without images_upload_url set, Upload tab won't show up
    images_upload_url: 'path_to_file',
    // override default upload handler to simulate successful upload
    images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', 'path_to_file');

        xhr.onload = function() {
            var json;

            if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }

            json = JSON.parse(xhr.responseText);

            if (!json || typeof json.location != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }

            success(json.location);
        };

        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());

        xhr.send(formData);
    },
    file_picker_callback: function(cb, value, meta) {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/* audio/* video/*');
        input.onchange = function() {
            var file = this.files[0];

            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var id = 'blobid' + (new Date()).getTime();
                var blobCache =  tinymce.activeEditor.editorUpload.blobCache; //this is where the error occurs
                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 });
            };
        };

        input.click();
    }
});

<form enctype="multipart/form-data" class="form-editor" method="post" id="fileinfo" name="fileinfo">
    <p>
      <textarea id="editor"></textarea>
    </p>
  </form>

I have tried it on codepen and it works so I really don't know what I'm doing wrong

https://codepen.io/tinymce/pen/132465f8d1e8c9666faf161255cb7eb8 the working example

Upvotes: 0