Add an input element of type=file in tinymce container

Question

I am trying to extend a tinymce pluggin and need to add an input element of type=file.

(I am new to such an exercise so please pardon my ignorance.. Also could not f

Answer 1

Managed to figure this out and want to leave the answer here for others trying to do something similar.

There is a 'subtype' on each of the UI form elements that will get added to the DOM as is. So doing the below did the trick for me :

{name: 'file', type: 'textbox', subtype: 'file', label: 'Upload', onchange: uploadFile},

Answer 2

In TinyMCE 3.x all dialogs where HTML pages that got loaded into a iframe or window. This was changed in TinyMCE 4 to make it easier to make plugins and fully support CDN:s. But you can still load HTML based pages into TinyMCE dialogs by using the WindowManager.

// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
    title: 'Insert/edit image',
    url: 'dialogTemplate.html',
    width: 700,
    height: 600
});

Also you can inline HTML:

// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
    title: 'Upload a file to attach',
    html: '<input type="file" class="input" name="file" id="file_attach" style="font-size: 14px; padding: 30px;" />',
    width: 450,
    height: 80,
    buttons: [{
            text: 'Attach',
            subtype: 'primary',
            onclick: function() {
                // TODO: handle primary btn click
                (this).parent().parent().close();
            }
        },
            {
                text: 'Close',
                onclick: function() {
                    (this).parent().parent().close();
                }
            }]
});