Copy link to clipboard
Copied
I created a HTML5 addon/extension for Adobe Indesign by using extension builder 3. For drag and drop image and text from extension to Indesign document. But when drag and drop images on the document, it shows path of image not the image itself. Also not able to drop the text.
It was all about an extra backslash on Windows :
Copy link to clipboard
Copied
You need to prevent the default behaviour, create some file reference for the text or image file onto the file system and loads the placegun.
Copy link to clipboard
Copied
I don't understand, what you want to say. I am new to Entension Builder 3 to create Html5 extension.
If you have any sample, please provide it.
Appreciate your help.
Copy link to clipboard
Copied
Here is how you can process:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<script src="../js/libs/jquery-1.9.1.min.js"></script>
<script src="../js/libs/CSInterface.js"></script>
<script src="../js/libs/AgoraLib.js"></script>
<script src="../js/libs/Vulcan.js"></script>
<script src="../js/libs/extendscript.js"></script>
<script src="../js/libs/theme.js"></script>
<link rel="stylesheet" href="../css/styles.css">
<script>
var csInterface = new CSInterface();
function drag(ev) {
var eid = String(ev.target.id);
csInterface.evalScript ( "checkContext()", function(result) {
if(result=="true") {
if(eid=="p"){
var filePath ="monTexte.txt";
window.cep.fs.writeFile(filePath, document.getElementById(ev.target.id).textContent);
csInterface.evalScript("loadPlaceGun('"+filePath+"')")
}
else{
var filePath = decodeURI(String(ev.target.src).replace(/^file:\/\//, "") );
csInterface.evalScript("loadPlaceGun('"+filePath+"')")
}
}
});
}
</script>
</head>
<body>
<p id="p" draggable="true" ondragstart="drag(event)">Drop some text. Warning : you need to enable drag text in preferences.</p>
<p>Drag image below…</p>
<img id="i" src="../assets/drop.jpg" draggable="true" ondragstart="drag(event)"/>
<br/>
<button onclick="window.location.reload()">Reload</button>
</body>
</html>
and in extendscript (main.jsx)
function checkContext(){
return String(app.documents.length>0);
}
function loadPlaceGun(filePath){
var file = File(filePath);
if ( !file.exists) return;
app.toolBoxTools.currentTool = UITools.PLACE_CURSOR_TOOL;
app.activeDocument.placeGuns.loadPlaceGun(file);
}
FWIW
Loic
Copy link to clipboard
Copied
Thanks for reply.
I am using the same code in my app but it is still not working. May be i am doing something wrong and i am getting url and text from web service.
Can you please, send this project to me for reference.
[Personal information removed per policy - https://forums.adobe.com/docs/DOC-3731]
Please do not include email addresses, phone numbers, etc. in your posts.
Copy link to clipboard
Copied
I could send code but it would be the same that you have here. which config is yours ?
and whatever assets source you work with, the idea remains at a scripting level : create a local file refere from the asset and load placeGuns so the user can drop asset anywhere he wants onto the document.
if you are looking at something even more powerful like creatinh http based links you would neef a c++ plugin.
Copy link to clipboard
Copied
When i am drag and drop my example.jpg image on adobe indesign doc. It is showing the path of that document in place of actual document.
Please send the sample. Thankyou for your help.
Copy link to clipboard
Copied
It would require a deeper analysis because the provided code should only place text contents when the source element isn't an image.
Anyway, I did some tests using a http based image as you did and it fails indeed (but just by not placing anything).
So I guess the alternative here is to either download the asset locally then use placeGuns as previously seen or use a compiled plugin to use http based links.
FWIW
Loic
Copy link to clipboard
Copied
If i am using the local image files. These are also showing the path of file not the image.
Copy link to clipboard
Copied
As I said, the code I exposed is basically all that the demo contains but here is the
in case it helps.
Copy link to clipboard
Copied
Hi Loic,
Your project is also not working for me.
Do i need to change some setting of Adobe Indesign.
Thankyou so much for your help.
Copy link to clipboard
Copied
I am working on windows.
Copy link to clipboard
Copied
Hi,
Please find below link for my extension have a look and let me know, if you find any issue.
Because the same is not working properly.
When i am trying to drag and drop an image. It show the path of the file in the text area. Here i am using a local file, in place of web URL of a service.
DragAndDrop.rar - Google Drive
Thanks for your time and support.
Copy link to clipboard
Copied
It was all about an extra backslash on Windows :
Copy link to clipboard
Copied
Well done Loic
Copy link to clipboard
Copied
This one was easy because it's part of the training I sometimes provide on developing Adobe HTML Extensions
But thanks for the comment, it's much appreciated.
Copy link to clipboard
Copied
Hi Loic,
Have you find any solution, to drag the images hosted on the web server.
Copy link to clipboard
Copied
Thankyou so much Loic.
Code is working very fine for all my local image files.
But not working for the files hosted on the web.
I appreciate your help, thanks again.
Copy link to clipboard
Copied
Well, didn't specially try to do it as it's also up to you to make things happen. But if I had to, I would use curl as a process from teh cep to retrieve file or Node:
FWIW
Copy link to clipboard
Copied
I am trying to use Node.js but its not working for me.
Do you have any sample extension with Node for reference by which i can understrand how to enable and use it.
Copy link to clipboard
Copied
Ok, so finding some time, here is an approach with node:
However the more I deal with this, the more I think it's a bit cumbersome. In product lifetime, users could download gigas of files in temps folders. InDesign will keep hard linking with those local files. C++ plugins allowing to use http based links would probably make much more sense here.
Copy link to clipboard
Copied
Hi,
All is working very fine.
Thanks for your help.
Now i want to know how to handle drop event?
If you have any idea please share. Thanks
Copy link to clipboard
Copied
How to use [FitOptions.FRAME_TO_CONTENT] and [FitOptions.CONTENT_TO_FRAME]
Copy link to clipboard
Copied
Well, the drag part is natively dealt by InDesign so it mostly consist in dealing with the drop event in the HTML side.
That you can find many samples at stackoverflow. The only issue is to look at the data loaded by the event and deal with it.
There is a OS difference. On mac, there is a file path info leading to the temporary snippet InDesign does create (exactly as when dropping item in InDesign Library). So you can use this for displaying thumbnail for example.
On windows, it's different but I can't remember right now the difference exactly apart that you don't have the url to the snippet.
In both case, solution may consist in exporting selection to a convenient format in order to display it inside the CEP panel.