2017/05/08

Mixing SimpleUploads with other drag&drop scripts

In the SimpleUploads plugin, one of the features is to provide a way for the users to add files to their content by simply dragging them from their desktop. Of course, there might be more than one editor on the page and so the files are accepted only when they are dropped on an editor.

But there's a little problem: if the user drops the file outside the editor they may lose their current content because that image is loaded instead (yes, you can use autosave and also prompt them with onBeforeUnload), so in order to prevent data loss or the delay and surprise about having to go back and restore last saved draft, I implemented a little check that rejects any file that it's dropped outside the editor.

So does this fix all the problems?
Not of course!
If you want to provide support to drag&drop in other part of the page, I'm preventing that script to work but the solution is simple:

In the configuration of your CKEditor, add this extra setting:
simpleuploads_allowDropOutside = true;

That's all. If the that setting exists I won't touch anything outside the editor and you can keep working as usual.

2 comments:

Mikel Aguirre said...

It would be useful if instead of completely disabling this feature we could add exceptions providing the ID or the classname of other drag&drop elements.

Alfonso said...

Sorry for the delay in the reply.

This setting only disables the prevention in my plugin of the drop of files outside of the editor, so if you want to keep this functionality in a partial way, then you can add to the page your own handler that performs whatever checks you want and then allow or disallow the drop, you have full control of the event.

If you want the people to drop files in other places, you're probably the best one to find out where the event should be allowed and under which conditions.

You can find my code in the lines 997 and 1015, that's all.