Skip to main content
yashk90147758
yashk90147758
Known Participant
May 8, 2018
Answered

Drag and drop image and text from html5 addon/extension

  • May 8, 2018
  • 5 replies
  • 4877 views

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.

This topic has been closed for replies.
Correct answer Loic.Aigon

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.


It was all about an extra backslash on Windows :

Download here

5 replies

Loic.Aigon
Loic.Aigon
Legend
May 21, 2018

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.

    yashk90147758
    yashk90147758Author
    Known Participant
    May 28, 2018

    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

    yashk90147758
    yashk90147758Author
    Known Participant
    May 28, 2018

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

    Loic.Aigon
    Loic.Aigon
    Legend
    May 16, 2018

    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 Overflow

    FWIW

      yashk90147758
      yashk90147758Author
      Known Participant
      May 18, 2018

      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.

      Loic.Aigon
      Loic.Aigon
      Legend
      May 10, 2018

      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.

      yashk90147758
      yashk90147758Author
      Known Participant
      May 10, 2018

      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.

      Loic.Aigon
      Loic.Aigon
      Legend
      May 10, 2018

      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

      yashk90147758
      yashk90147758Author
      Known Participant
      May 9, 2018

      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.

      Loic.Aigon
      Loic.Aigon
      Legend
      May 9, 2018

      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

      http://www.ozalto.com/

      yashk90147758
      yashk90147758Author
      Known Participant
      May 10, 2018

      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.

      Loic.Aigon
      Loic.Aigon
      Legend
      May 8, 2018

      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.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices