0

I had put together a working instance of a TinyMCE editor with drag and drop image upload where if an image is dropped into the TinyMCE editor (or pasted) it would trigger an upload to the server with the image and said image would now be in the editor.

That functionality suddenly stopped working. All I get is this error message: "Dropped file type is not supported"

In addition it seems that the example of that functionality on the TinyMCE website also no longer works with the same error message.

Was there a change in either browsers or the TinyMCE code that made this stop working? It seems to be something not TinyMCE code related if it suddenly stopped working even though the TinyMCE version was untouched.

Edit: Paste appears to work, and the image uploads successfully when pasted. However drag and drop still fails. This is dragging and dropping directly into the editor not into the upload image dialog which works fine.

lordmj
  • 47
  • 1
  • 9
  • Can you post your `tinymce.init()` config, or create and fork a Tiny Fiddle? http://fiddle.tinymce.com/baaaab Can you also confirm what browsers you are using (name and versions)? Additionally, which page in TinyMCE's documentation are you referring to specifically? – Tiny Lincoln Nov 11 '20 at 22:24

2 Answers2

2

I think your problem might be related to the block_unsupported_drop option that exists since TinyMCE 5.4, see https://www.tiny.cloud/docs/configure/file-image-upload/#block_unsupported_drop.

I noticed the same problem as you ("Dropped file type is not supported" notification) and verified it no longer exists for me if I set block_unsupported_drop to false (TinyMCE 5.5 in inline mode).

That's the relevant code in TinyMCE: https://github.com/tinymce/tinymce/blob/91e7f357ca8db3aeaa6f48c7efa97eb8c5c39fbb/modules/tinymce/src/core/main/ts/DragDropOverrides.ts#L281-L297

To be honest, I don't quite understand under what circumstances preventing the drop might be required, but it looks like the option was introduced as part of a fix for faulty browser navigation after dropping images (https://github.com/tinymce/tinymce/commit/c020562dadb7e3d9061f043009b686a8ca1366c5). Let me know if you find out more.

mtter
  • 44
  • 1
  • That fixed the problem. One thing I want to add is is there an option to limit the types of files than can be dropped into the editor? – lordmj Nov 18 '20 at 16:12
  • This did not fix the problem for me. I created a fiddle https://fiddle.tiny.cloud/25haab to show the error message when an image is dropped on the editor. – Matt Feb 18 '21 at 20:20
  • 2
    it just opened the dropped image in a new tab. Any solution for this? – Anuj Shrestha May 10 '21 at 11:54
0

Ended up registering an ondrop event handler. I'm using the @tinymce/tinymce-angular, but should work the same when registering using editor.on("drop", (e) => {...}) or similar.

import { EditorComponent } from "@tinymce/tinymce-angular";

....

@ViewChild(EditorComponent) editor: EditorComponent;

....

ngAfterViewInit() {

    this.editor.onDrop.subscribe(async (e: { editor, event }) => {
        let event = e.event;

        // Preventing 'Dropped file type is not supported' notification pop up
        event.preventDefault();
        event.stopImmediatePropagation();
        event.stopPropagation();

        let files: File[] = [...event.dataTransfer.files];
        let uploadedFiles = await this.uploadFiles(files); // backend call

        uploadedFiles.forEach(file => {
            // change for different file types
            this.insertContent(`<img src="${file.Url}" />`);
        })
    })

}
baltzar
  • 446
  • 4
  • 8