Java Script code for browse and open AI file in Illustrator......

Report · May 23, 2017

Hello Friends,

I am writing extension in HTML5 for Illustrator CC 2015.3's plugin.

so I want to browse and open AI file only after click on button Btn .

and after browsing the path will appear in the textbox instead of art_filename .

I am designing layout in html and I am using javascript for scripting .

So Please assist me for doing above task.

Thanks & Regards

Kundan

Report · May 23, 2017

In the html file :

<?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>
    <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>
    <script src="../js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/testai.css"/>
  </head>
  <body>
    <div>
        <input type="text" id="path"/>
        <button id="btn" />
    </div>
  </body>
</html>

In the main.js file


$(function() {
    var csInterface = new CSInterface();
    
    $("#btn").click( function (){
        var appName = new CSInterface().hostEnvironment.appName;
        var extScript = "$._ext_" + appName + ".getFile()";
  csInterface.evalScript(extScript, function(result) {
  $("#path").val( result );
  });
    })
});

In the /jsx/product_jsx/Illustrator.jsx

/*
 * Add Extendscript functions to this file and call them from your Javascript.
 */
$._ext_ILST={
    getFile:function() {
        var mac = $.os[0] == "M",
            wf = "Adobe Illustrator files : *.ai;",
            mf = function(f){return /\.ai$/i.test(f.name)},
            f = File.openDialog ( "Please choose an AI file…", (mac? mf : wf ) );
        
        if ( f ) return f.fullName;
        
        return "";
            
    }
};

Report · May 23, 2017

Hello Loic.

My file structure is like this.

I put main.js code inside TUKAMarkPlugin.jsx (instead of main.js) and next code in Illustrator.jsx.

and my html code is

It's showing like this.

But after click on button , the path is not showing in text box.

I am new in html before that I was creating extension in flash builder.

I am using windows 10 (64 bit).

Please assist.

Regards

Kundan

Report · May 24, 2017

Hi Kundan,

You have to use a js file to make the bridge between the html side and the jsx side. So the click listener is in the html/js world. But once the event is caught, the CSInterface instance will call the routine on your jsx file. Then all you have to do is to send back the jsx string to the js ecosystem.

You insist on not knowing html so I guess a good start for you is to enjoy the terrific ressources at your disposal such as the HTML Extensions SDK (free)

GitHub - Adobe-CEP/CEP-Resources: Getting Started with Adobe CC 2014 Extension SDK

or the Complete courses from Davide Barranca (paid for but awesomely worth it):

The Adobe Photoshop HTML Panels Development Course is available! | Photoshop, etc.

HTH

Loic

www.ozalto.com

Report · May 24, 2017

Thanks Loic.

I am following what you suggest and will get back to you.

Thanks & Regards

Kundan

Report · May 25, 2017

Hello Loic.

I am doing like this but after click on button it's not opening the dialog for browse the AI file.

1. File structure

2. index.html

3. main.js

4.Illustrator.jsx

5. OUTPUT

When I am clicking on button Run AI Mode it's working but after click on browse button it's not working.

But when I am putting run instead of getFile in Illustrator.jsx file then browse is opening after click on button Run on ai Mode.

I have to browse AI file after click on browse button and path should be in textbox (before browse button).

Please suggest me where I have be change.

Thanks & Regards

Kundan

Report · Oct 10, 2017

Hi loic,

could you please describe the way to use this code. am unable to open the file using this code.

Report · May 23, 2017

Thanks for reply Loic.Aigon,

I am applying your code , then I will update you.

Thanks & Regards

Kundan

Adobe Community

Java Script code for browse and open AI file in Illustrator......

1 Correct answer

Explore related tutorials & articles