• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Drag and drop image and text from html5 addon/extension

Community Beginner ,
May 07, 2018 May 07, 2018

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.

Views

3.5K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

People's Champ , May 15, 2018 May 15, 2018

It was all about an extra backslash on Windows :

Download here

Votes

Translate

Translate
People's Champ ,
May 08, 2018 May 08, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 09, 2018 May 09, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
May 09, 2018 May 09, 2018

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);

}

Capture d’écran 2018-05-09 à 14.58.05.png

FWIW

Loic

http://www.ozalto.com/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 09, 2018 May 09, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
May 10, 2018 May 10, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 10, 2018 May 10, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
May 10, 2018 May 10, 2018

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 10, 2018 May 10, 2018

Copy link to clipboard

Copied

If i am using the local image files. These are also showing the path of file not the image.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
May 11, 2018 May 11, 2018

Copy link to clipboard

Copied

As I said, the code I exposed is basically all that the demo contains but here is the

zip file

in case it helps.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 14, 2018 May 14, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 14, 2018 May 14, 2018

Copy link to clipboard

Copied

I am working on windows.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 15, 2018 May 15, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
May 15, 2018 May 15, 2018

Copy link to clipboard

Copied

It was all about an extra backslash on Windows :

Download here

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
May 15, 2018 May 15, 2018

Copy link to clipboard

Copied

Well done Loic

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
May 15, 2018 May 15, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 16, 2018 May 16, 2018

Copy link to clipboard

Copied

Hi Loic,

Have you find any solution, to drag the images hosted on the web server.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 15, 2018 May 15, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
May 16, 2018 May 16, 2018

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:

javascript - How to download a file with Node.js (without using third-party libraries)? - Stack Over...

FWIW

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 18, 2018 May 18, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
May 21, 2018 May 21, 2018

Copy link to clipboard

Copied

Ok, so finding some time, here is an approach with node:

Download here

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 27, 2018 May 27, 2018

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 28, 2018 May 28, 2018

Copy link to clipboard

Copied

How to use [FitOptions.FRAME_TO_CONTENT] and [FitOptions.CONTENT_TO_FRAME]

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
May 28, 2018 May 28, 2018

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines