Tinymce: Image upload dialog UI blocking or upload progress loader.

[nishanbajracharya]

I'm trying to upload an image from local to a server and in the meantime show a loading overlay over the image upload dialog. I did not find anything in the docs for the file_picker_callback method about adding such an overlay. I checked the docs for the dialog API and found a method called block which is supposed to do what I want to achieve but I cannot find a way to access this.

Is there a way to get the instance of the upload dialog or a feature in the callback functions that allow me to show a loading overlay in the dialog to indicate that the upload is currently in progress?

I am currently using tinymce-react and the image plugin to open the Insert/Edit Image dialog.

My init config:

{
  height: '400px',
  toolbar:
    'bold italic underline | fontsizeselect forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist indent outdent | link image media',
  plugins: 'textcolor link lists image media',
  menubar: false,
  contextmenu: false,
  /* enables adding custom url conversion logic */
  urlconverter_callback: url => {
    if (url.substring(0, 2) === '//') {
      url = 'https:' + url;
    }

    return url;
  },
  image_title: true,
  /* enable automatic uploads of images represented by blob or data URIs*/
  automatic_uploads: true,
  images_upload_credentials: true,
  // add file picker
  file_picker_types: 'image',
  file_picker_callback: function(cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.onchange = function() {
      var file = this.files[0];

      // Start Loading UI
      // Upload file to server code here
      uploadToServer(file).then(response => {
        if (response.ok) {
          cb(response.data.path, { title: response.data.file_name });
        } else {
          alert(
            'Failed to upload document. Please check you file type and file size.'
          );
        }
        // Stop Loading UI
      });
    };
    input.click();
  }
};

[sudhakarselva]

Yeah,looking exact samething

[sudhakarselva]

while uploading its through upload tab its there but here nope

[natehitze]

I struggled with this for a while but ended up with a good-enough solution for my simple implementation. Hope this helps someone else. The editor emits an event when a window (e.g. dialog) opens and closes. I just keep track of the most recently opened window and then when the file_picker_callback is called I call .block() on that window.

I'm sure there's some kind of corner case I'm missing that will cause this to break but I'm not too worried about it. If you are worried about it there are a couple ways you could eliminate some doubt. The OpenWindow event includes the dialog being opened with its properties. You could infer what kind of dialog is open based on the properties and then only track the insert file or image dialog. You could also write a simple dialog tracker by keeping track of all dialogs opened/closed and then deciding which dialog(s) in the stack should be blocked. Window Manager keeps track of the dialogs already but I couldn't find a place where that was exposed.

Some trimmed down example code:
In the editor init options I have

setup: function(editor) {
    editor.on('OpenWindow', function(eventDetails) {
        document.tinymceEditor.topLevelWindow = eventDetails.dialog; // document.tinymceEditor is where I keep track of my editor instance. You can probably accomplish this without using that
    });
}

And then in my file_picker_callback I have the following around my doUpload promise:

document.tinymceEditor.topLevelWindow.block('Uploading file...');
// ... blobcache/file stuff here
doUpload(blob, function() {
    // Success
    // callback call and input cleanup here
    document.tinymceEditor.topLevelWindow.unblock();
}, function() {
    // Failure
    document.tinymceEditor.topLevelWindow.unblock();
})