upload image from local into tinyMCE

I know it is an old question. However, I think this answer may help somebody who wants to upload multiple images by using tinyMCE 5.xx. Based on @Chris Lear's and @stephen.hanson's answer, I modify some code to support multiple images uploading. Here is my code. Hope it could help somebody.

tinymce.init({
toolbar: 'imageupload',
setup: function(editor) {
  initImageUpload(editor);
  }
});

function initImageUpload(editor) {
// create input and insert in the DOM
 var inp = $(`<input id='tinymce-uploader' type='file' name='pic' accept='image/*' style='display:none' multiple>`);
  $(editor.getElement()).parent().append(inp);
// add the image upload button to the editor toolbar
  editor.addButton('imageupload', {
  text:'IMAGE',
  onAction: function(_) { 
 // when toolbar button is clicked, open file select modal
    inp.trigger('click');
  }
});
 // when a file is selected, upload it to the server
inp.on('change',function(){
    for(let i=0;i<inp[0].files.length;i++){
        let file = inp[0].files[i];
        let data = new FormData();
        data.append('multipartFile',file);
        axios.post('/upload/image/url',
        data,
        {
         headers: {
          'Content-Type': 'multipart/form-data'
          }
         }).then(res => {
          if (res.status = 200) { 
              editor.insertContent('<img class="content-img" src="' + data.url + '"/>');
             // clear data to avoid uploading same data not working in the second time
             inp.val('');
          }
      })
  }

It works for image upload.Is this possible for file upload ? I want to add a custom file upload option from local into tinyMCE and want to show it by url .

 Code is something like below which not working:


   ed.addButton('mybutton2', {
        text:"File",
        icon: false,

        onclick: function(e) {
            console.log($(e.target));
            if($(e.target).prop("tagName") == 'BUTTON'){
                console.log($(e.target).parent().parent().find('input').attr('id'));
                if($(e.target).parent().parent().find('input').attr('id') != 
'tinymce-uploader') {
                    $(e.target).parent().parent().append('<input id="tinymce- 
uploader" type="file" name="pic" accept="*" height="100" weidth="100" 
 style="display:none">');
                }
                $('#tinymce-uploader').trigger('click');
                $('#tinymce-uploader').change(function(){
                    var input, file, fr, img;

                    if (typeof window.FileReader !== 'function') {
                        write("The file API isn't supported on this browser yet.");
                        return;
                    }

                    input = document.getElementById('tinymce-uploader');
                           // var URL = document.my_form.my_field.value;
       alert(input.files[0]);
                    if (!input) {
                        write("Um, couldn't find the imgfile element.");
                    } else if (!input.files) {
                        write("This browser doesn't seem to support the `files` 
              property of file inputs.");

                    } else if (!input.files[0]) {
                        write("Please select a file before clicking 'Load'");
                       alert( input.files[0]);
                    } else {
                        file = input.files[0];
                        fr = new FileReader();
                        fr.onload = createFile;
                        fr.readAsDataURL(file);
                            //  alert(fr.result);

                    }

                    function createFile() {
                       //what should I write here?
                      ed.insertContent('<a href="'+img.src+'">download 
      file_name</a>');
                    }
                });

            }







        }
    });