Drop event should not bubble up if the image was uploaded

[zadam]

I implemented custom image uploader plugin/adapter which allows user to drag & drop images into the text content which then uploads them the server and inserts them at the caret. This works well.

But I also have a custom drop DIV which allows upload of any type of file attachment. CKEditor is inside this DIV since I want to allow dropping attachments on large portion of the app. The way I image it should work is:

1. image scenario: I drag image & drop it onto the CKEditor instance - CKEditor handles the upload and insert into the text content. Since it handled the upload, it stops the event propagation/bubbling
2. non-image scenario: I drag a file & drop it onto the CKEditor instance - since it's not an image, CKEditor doesn't upload it and lets the event bubble up, my custom drop DIV handler will process the event and upload the file

This kind of works, except for the fact that in the scenario 1), CKEditor doesn't stop the event propagation even though the event has been handled (image has been uploaded). Result of this is then that I get two uploads of the file.

In the image upload plugin infrastructure I can't see a way how to stop the propagation myself, since I don't have access to the original event AFAICS.

[Mgsy]

cc @oleq

[patrikrazem]

@zadam Would you mind sharing how you achieved the generic file upload mechanism? Are you disregarding CKEditor's handing entirely, or did you somehow hook into it with a plugin?

[Mgsy]

@zadam Would you mind sharing how you achieved the generic file upload mechanism? Are you disregarding CKEditor's handing entirely, or did you somehow hook into it with a plugin?

@patrikrazem, you can find a guide about creating custom image upload adapter on our documentation page.

[patrikrazem]

@Mgsy Thank you, but I've already implemented a custom image upload adapter and it works as expected. What I'm now trying to do is handle uploads of all file types (documents, pdfs, etc.) and then insert them into the content as anchor tags.

[zadam]

@patrikrazem It's pretty simple, I have a div element on which I have event listener for drop event. So I drag a file(s) from file manager to the div, drop event gets called and I can access the files from e.originalEvent.dataTransfer.files and upload them using FormData object with AJAX.

In this particular case the div is parent of CKEditor so images are handled by CKEditor upload, but other file types bubble up and are uploaded using the uploaded described above (with no CKEditor involvement).