Page 1 of 1
Handle drag and drop
Posted: Sun Nov 15, 2020 2:03 am
by 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?
Re: Handle drag and drop
Posted: Mon Nov 16, 2020 12:30 pm
by 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
Re: Handle drag and drop
Posted: Tue Nov 17, 2020 9:30 pm
by 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.
Re: Handle drag and drop
Posted: Wed Nov 18, 2020 2:47 am
by 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
Re: Handle drag and drop
Posted: Wed Nov 18, 2020 9:33 pm
by 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
Re: Handle drag and drop
Posted: Wed Nov 18, 2020 10:49 pm
by manojdcoder
Thank you Andrei, that helped.