Local upload

We’ve supported local file picking and image uploading for quite some time already. However making these features functional required some effort on the user’s side, while not being immediately obvious, at the same time. Some effort is still required, but we decided to supplement the feature with an intuitive UI.

Once images_upload_url is defined in the config, an Upload tab appears in the Image Dialog.

So a setup like this displays a friendly UI simplifying image upload either by picking it up or by dropping it in, directly from the desktop:

TinyMCE HTML JS Edit on CodePen Click the 'Insert/Edit Image' button, then click the 'Upload' tab. Alternatively, drag and drop an image here.

<textarea id="local-upload">
    Click the 'Insert/Edit Image' button, then click the 'Upload' tab. Alternatively, drag and drop an image here.
</textarea>

tinymce.init({
  selector: 'textarea#local-upload',
  plugins: 'image code',
  toolbar: 'undo redo | image code',

  /* without images_upload_url set, Upload tab won't show up*/
  images_upload_url: 'postAcceptor.php',

  /* we override default upload handler to simulate successful upload*/
  images_upload_handler: function (blobInfo, success, failure) {
    setTimeout(function () {
      /* no matter what you upload, we will turn it into TinyMCE logo :)*/
      success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
    }, 2000);
  }
});

(function() { var isIE = !!window.MSInputMethodContext && !!document.documentMode; if (isIE && document.getElementsByClassName("ie11_optional")[0] !== undefined) { document.getElementsByClassName("ie11_optional")[0].style.display = 'none'; } })(); (function() { tinymce.init({ selector: 'textarea#local-upload', plugins: 'image code', toolbar: 'undo redo | image code', /* without images_upload_url set, Upload tab won't show up*/ images_upload_url: 'postAcceptor.php', /* we override default upload handler to simulate successful upload*/ images_upload_handler: function (blobInfo, success, failure) { setTimeout(function () { /* no matter what you upload, we will turn it into TinyMCE logo :)*/ success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png'); }, 2000); } }); })(); (function() { /* TODO: more js, less jekyll */ var id = "local-upload"; var html = decodeURIComponent("%0A%3Ctextarea%20id=%22local-upload%22%3E%0A%20%20%20%20Click%20the%20'Insert/Edit%20Image'%20button,%20then%20click%20the%20'Upload'%20tab.%20Alternatively,%20drag%20and%20drop%20an%20image%20here.%0A%3C/textarea%3E%0A%0A"); var js = decodeURIComponent("%0Atinymce.init(%7B%0A%20%20selector:%20'textarea#local-upload',%0A%20%20plugins:%20'image%20code',%0A%20%20toolbar:%20'undo%20redo%20%7C%20image%20code',%0A%0A%20%20/*%20without%20images_upload_url%20set,%20Upload%20tab%20won't%20show%20up*/%0A%20%20images_upload_url:%20'postAcceptor.php',%0A%0A%20%20/*%20we%20override%20default%20upload%20handler%20to%20simulate%20successful%20upload*/%0A%20%20images_upload_handler:%20function%20(blobInfo,%20success,%20failure)%20%7B%0A%20%20%20%20setTimeout(function%20()%20%7B%0A%20%20%20%20%20%20/*%20no%20matter%20what%20you%20upload,%20we%20will%20turn%20it%20into%20TinyMCE%20logo%20:)*/%0A%20%20%20%20%20%20success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');%0A%20%20%20%20%7D,%202000);%0A%20%20%7D%0A%7D);%0A"); var css = ""; var tabNames = ["run","html","js"]; /* Note: there are some other fields we could populate here to polish this. */ /* See: https://blog.codepen.io/documentation/api/prefill/ */ var data = { title: "TinyMCE Example", description: '', html: html, css: css, css_external: 'https://www.tiny.cloud/css/codepen.min.css', js: js, js_external: 'https://cloud.tinymce.com/5/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc' }; document.getElementById("codepen_data_local-upload").value = JSON.stringify(data); /* TODO: */ var tabs = tabNames.map(function(t) { return { tab: document.getElementById("codepen_tab_" + t + "_" + id), pane: document.getElementById("codepen_pane_" + t + "_" + id) }; }); tabs.forEach(function(t) { t.tab.onclick = function(e) { tabs.forEach(function(tt) { tt.pane.style.display = t === tt ? 'block' : 'none'; tt.tab.className = t === tt ? 'codepen_tab_selected' : 'codepen_tab_deselected'; }); e.preventDefault(); }; }); if (document.getElementById("codepen_tab_codepen_" + id) !== null) { document.getElementById("codepen_tab_codepen_" + id).onclick = function() { document.getElementById("codepen_form_" + id).submit(); }; } })();

All image uploading options are supported, including images_upload_handler (a way to define custom file uploader) and images_upload_credentials.

For more details check Upload Images tutorial from the General Configuration series.