Handle drag and drop

[manojdcoder]

When I drag and drop multiple images into editor, it picks up only the first image and try to display it in base64 format.

I would like to upload all images to server and then insert image for each file dropped.

I came across https://www.oxygenxml.com/maven/com/oxy ... ooser.html - Purpose CHOOSE_SAVE_LOCATION which is triggered only once with the base64 version of image that was dropped first (even though if multiple files were dropped).

I also checked https://www.oxygenxml.com/doc/versions/ ... undle.html, this might work for a custom framework but I would like this feature implemented for all the frameworks I have, including the ones bundled with Oxygen. I may not want to copy the extension into each framework every time individually.

Any pointers?

[cristi_talau]

Hello,

Dropping multiple files in the editor is currently not supported. I registered an issue in our internal tracking system. In order to understand the priority of this feature, it would be helpful to share some information about the workflow that requires the ability to drop multiple images.

Best,
Cristian

[manojdcoder]

We would like to give the users ability to drop multiple images at once into editor from their computer, so all are uploaded and inserted into document at once, instead of having to repeat the process every time for each image.

[manojdcoder]

Hello Cristi,

If I want to extend the default drop behaviour of any built-in frameworks (DITA, DOCBOOK etc.,), should I implement a custom Extensions Bundle - https://www.oxygenxml.com/doc/versions/ ... undle.html and add AuthorDnDListener listener?

If I do, there is already an extensionsBundleClassName defined in dita.framework

Code: Select all

<field name="extensionsBundleClassName">
	<String>ro.sync.ecss.extensions.dita.DITAExtensionsBundle</String>
</field>

How may I add my custom extension / drop listener while keeping other functionalities in DITAExtensionsBundle intact?

Thanks,
Manoj

[andrei_popa]

Hello Manoj,

At the moment all drag and drop handling is done on the client-side.
You would need to create a plugin[1] to handle the drop of multiple images client-side.

Here are some rough guidelines:
- Add a listener for the "drop" event on the body element.
- When detecting a "drop" event, you can check if it contains multiple files/images. If it does contain multiple images, you can call stopPropagation to prevent Web Author's default handling for the event and process these images to suit your needs.
- You might show a file chooser dialog to allow the user to select where to upload them.
- Once all images have been uploaded, you can create a document fragment with the images and insert them using InsertFragmentOperation[2][3]

Example of inserting a fragment with InsertFragmentOperation:

Code: Select all

// Assuming imageUrls contains the list of image URL's after uploading.
var fragmentToInsert = '';
for (var url of imageUrls) {
  fragmentToInsert += '<image href="' + url +'"/>';
}
editor.getActionsManager().invokeOperation(
    'ro.sync.ecss.extensions.commons.operations.InsertFragmentOperation', 
    { fragment: fragmentToInsert }, 
    callbackAfterInserting
);

Best regards,
Andrei

[1] - https://www.oxygenxml.com/doc/ug-waCust ... ugins.html
[2] - https://www.oxygenxml.com/doc/ug-waCust ... onsmanager
[3] - https://www.oxygenxml.com/doc/ug-editor ... ments.html

[manojdcoder]

Thank you Andrei, that helped.