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 find examples/samples to work with..)

It seems you can do the following to show elements to a container that opens in a panel :

var generalFormItems = [
  {name: 'alt', type: 'textbox', label: 'Image description'},
  {name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
];

win = editor.windowManager.open({
   title: 'Insert/edit image',
   data: data,
   bodyType: 'tabpanel',
   body: [
           {
        title: 'General',
        type: 'form',
        items: generalFormItems
       },
    ],
    onSubmit: onSubmitForm });

I am interested in adding an input html of type=file (<input type="file".../>). So there should be the usual html button that will show the 'file dialog' on the browser to allow the user to pick a file. So something like this I am hoping :

    var generalFormItems = [
      {name: 'alt', type: 'textbox', label: 'Image description'},
      {name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},

--->  {name: 'fileSelect', type: 'file', label: 'Select a File to Upload'},

    ];

Is it possible to do this and how?

score 9 · Accepted Answer · edited Jan 11 '16 at 10:30

9

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},

edited Jan 11 '16 at 10:30

naXa stands with Ukraine

35,493
19
190
259

answered Nov 30 '13 at 12:34

user1055761

1,071
1
12
28

Any idea how you would make a form field readonly, I've tried adding `readonly:'readonly'` into the list but it wasn't added to the dom – Justin Bicknell Jan 03 '14 at 19:58
Figured it out, added an onPostRender event to that item, disabled from within – Justin Bicknell Jan 03 '14 at 20:16

naXa stands with Ukraine · Answer 2 · 2016-01-11T12:44:46.430

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();
                }
            }]
});

Add an input element of type=file in tinymce container

2 Answers2

Linked

Related