TinyMCE file_picker_callback select image from selected default browser file

Question

I use TinyMCE in the project and I want the user to select and upload images to the server using the default window of the inserted image.

I want to click the following button:

Open the default file selection window for browsers and add the selected image to the editor:

My code so far is as follows.

JS:

tinymce.init({ selector: '#html-editor', language: 'pt_PT', plugins: [ "bdesk_photo advlist autolink link image lists charmap preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code media nonbreaking", "table contextmenu directionality paste textcolor colorpicker imagetools" ], add_unload_trigger: false, toolbar: "styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media preview | forecolor backcolor table", image_advtab: true, file_picker_callback: function (callback, value, meta) { $('#html-editor input').click(); //how to get selected image data and add to editor? }, paste_data_images: true, images_upload_handler: function (blobInfo, success, failure) { // no upload, just return the blobInfo.blob() as base64 data success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64()); } }); 

HTML:

 <div id="html-editor"> <input name="image" type="file" style="width:0;height:0;overflow:hidden;"> </div> 

What changes should I make to the file_picker_callback event to get the selected file and add it to the editor?

Answer 1

There was the same problem. Using the following fixes for me, remember that the browser must support FileReader (otherwise just paste your own script).

html (put this somewhere on the html page):

 <input id="my-file" type="file" name="my-file" style="display: none;" onchange="" /> 

js (in tinymce initialization configuration):

 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) { callback(e.target.result, { alt: file.name }); }; reader.readAsDataURL(file); }; } } 

Answer 2

Try

 var imageFilePicker = function (callback, value, meta) { tinymce.activeEditor.windowManager.open({ title: 'Image Picker', url: '/images/getimages', width: 650, height: 550, buttons: [{ text: 'Insert', onclick: function () { //.. do some work tinymce.activeEditor.windowManager.close(); } }, { text: 'Close', onclick: 'close' }], }, { oninsert: function (url) { callback(url); console.log("derp"); }, }); }; tinymce.init({ selector: 'div#html-editor', height: 200, theme: 'modern', plugins: [ 'advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools' ], toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', toolbar2: 'print preview media | forecolor backcolor emoticons', image_advtab: true, paste_data_images: true, automatic_uploads: true, file_picker_callback: function(callback, value, meta) { imageFilePicker(callback, value, meta); } }); 

Answer 3

does not add the selected media path. how can we solve this problem?

 var imageFilePicker = function (callback, value, meta) { tinymce.activeEditor.windowManager.open({ title: 'Image Picker', url: '/images/getimages', width: 650, height: 550, buttons: [{ text: 'Insert', onclick: function () { //.. do some work tinymce.activeEditor.windowManager.close(); } }, { text: 'Close', onclick: 'close' }], }, { oninsert: function (url) { callback(url); console.log("derp"); }, }); }; tinymce.init({ selector: 'div#html-editor', height: 200, theme: 'modern', plugins: [ 'advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools' ], toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', toolbar2: 'print preview media | forecolor backcolor emoticons', image_advtab: true, paste_data_images: true, automatic_uploads: true, file_picker_callback: function(callback, value, meta) { imageFilePicker(callback, value, meta); } });