TinyMCE file_picker_callback select image from default browser file selection
Had the same problem. Using the following fixed it for me, remember that the browser must support FileReader (otherwise just insert your own script).
html (put this anywhere on the html page):
<input id="my-file" type="file" name="my-file" style="display: none;" onchange="" />
js (in the tinymce init config):
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);
};
}
}
Ricky
Since I 'surfed' the web for the first time, the Internet has become one of my main passions, making me choose a career in this area. My other passions are music, cinema, TV shows, learning, eating white chocolate, cooking 'francesinhas' (mail me if you're curious about that), playing around with Photoshop and Illustrator, programming, social networking and, as an eternal fan of the X-Files, I love a good conspiracy. As a young and healthy man, I love sports and practice as much as I can off-road biking, hiking and jogging. In a professional standpoint, I'm a Front-end Developer, but I like to be known as a World Wide Web Worshipper :) Among working with clients from various business areas and markets, I'm currently working on a personal e/m-Commerce project for the retail and consumer industry.
Updated on June 05, 2022Comments
-
Ricky almost 2 years
Im using TinyMCE in a project and want the user to select and upload images to the server using its default insert image window.
I want to click the following button:
Open the browsers default file select window 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 kind of changes must i make to the file_picker_callback event in order to get the selected file and add it to the editor?