Upload images from computer

[Romgua]

Hi,

Is it possible to upload local image ? If yes, how ? I found a codepen to explain what I need, maybe this can help : https://codepen.io/nirajmchauhan/pen/EjQLpV

Thanks.

[Romgua]

I add the file_picker_callback function in the TinymceModule.withConfig({ }) and the input type="file" like the codepen and it works. But if I write something after the image's importation, the image disappear.

[Romgua]

I added this to my tinymce config and it seems to work setup: editor => { editor.on('init', () => { editor.off('change'); }); }

[roymj88]

Any update on this?

[cantuket]

You can create an ephemeral input element instead as shown in the documentation, but I can't speak to the browser support...

https://www.tinymce.com/docs/demo/file-picker/ note: They mention in the code comments that future releases would "register the blob in TinyMCEs image blob internally" and I believe that is implemented now, which is why my code below is leaner...

TinymceModule.withConfig({
      plugins: ['image', 'code'],
      image_title: true, /* Submit PR to add to Interface */
      min_height:400,
      file_picker_types: 'image', 
      file_picker_callback: function(cb, value, meta) {
            var input = document.createElement('input') as HTMLInputElement;
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');
            input.onchange = function() {
              var res = <HTMLInputElement>this;
              var file:File = res.files[0];
              var reader = new FileReader();
              reader.onload = function () {
                var base64 = reader.result.split(',')[1];
                // call the callback and populate the Title field with the file name
                cb('data:image/png;base64,'+base64, { title: file.name });
              };
              reader.readAsDataURL(file);
            };
            
            input.click();
          }
    }),

Also note these sections I changed for typeScript...

 var input = document.createElement('input') as HTMLInputElement;
...
 var res = <HTMLInputElement>this;
  var file:File = res.files[0];

( https://stackoverflow.com/questions/39485555/i-want-to-get-a-file-object-in-typescript-from-a-html-file-input-type )

And if you want to use the image title option ( image_title: true,) you will have to add 'image_title' property to the TinymceModule interface, because it was missing for some reason...

in 'node_modules/angular2-tinymce/dist/angular2-tinymce.config.interface.d.js' add... image_title?:boolean;

I'll submit a PR for the above addition.

[cantuket]

PS - Ran into another TypeScript error with the production build so ended up just building my own implementation based on this tutorial....

https://go.tinymce.com/blog/angular-2-and-tinymce/

[ps06756]

@cantuket Thanks for the link. Was able to get it to work using this link.