Tinymce popup window with file input controll type

Question

On my custom tinyme plugin I want to render a window with 2 tabs:

One with a url input
One with fuile upload

The code that does the job is:

tinymce.PluginManager.add('upload', function(ed, url){
        ed.addCommand('initUpload', function(){
          //Do stuff 
        });

        //Register a button that open a window
        ed.addButton('upload', {
          title: 'Upload Files into the editor',
          // cmd: 'initUpload',
          text: '',
          icon:'upload-icon',
          onClick: function(){
            ed.windowManager.open({
              title:'Insert a File',
              bodyType:'tabpanel',
              body:[
                {
                  title: "From file into your computer",
                  type:"textbox",//Thing That I need to change with file input
                  label:"File"
                },
                {
                  title: "From Url",
                  type:"textbox",
                  label:"Url"
                },
              ],
              onsubmit: function(e) {
               //do Stuff
              }
            })
          }
        });
      });

I tried to replace the:

{
   title: "From file into your computer",
   type:"textbox",//Thing That I need to change with file input
   label:"File"
 },

With:

{
   title: "From file into your computer",
   type:"file",//Thing That I need to change with file input
   label:"File"
 },

But for some reason I get:

Error: Could not find control by type: file

So how can I set a file controll type to the popup window that tinymce renders?

score 2 · Accepted Answer · answered Sep 15 '17 at 08:23

As seen on Add an input element of type=file in tinymce container you just need to use put a subtype file into your tab fonfiguration.

In other words replace the:

{
   title: "From file into your computer",
   type:"textbox",//Thing That I need to change with file input
   label:"File"
 },

With:

{
   title: "From file into your computer",
   type:"textbox",
   subtype:"file"
   label:"File"
 },

Also keep in mind that you need to provide an onchange callback the the settings in order get the file contents.

Tinymce popup window with file input controll type

1 Answers1