Skip to main content
Sturm359
Sturm359
Inspiring
October 17, 2018
Question

How to access filesystem from panel?

  • October 17, 2018
  • 2 replies
  • 6649 views

Summary (TL;DR)

Is there any way for the HTML Panel side of an Adobe CEP extension to access the local (Or a LAN's) filesystem?

Long Version

The context

Although I'm fairly experienced with Adobe ExtendScript (AES), having worked with it for more than 5 years now, I'm almost completely brand-new to Adobe CEP. In the last couple of weeks, I've learned quite a bit about it, though.

I have a couple of projects that I wish to convert from a very poorly-made, single-file, procedural, spaghetti-code AES JavaScript file to something more structured and easier to maintain in the future. To that end, I want to use TypeScript and leverage many of its benefits, including modules. Since developing an Adobe CEP extension requires two separate JS environments, I already have my project set up with two tsconfig.json files to handle transpiling to the correct ES versions for each. And since CEP doesn't seem to support CommonJS, I have the HTML Panel side set up to use SystemJS (0.21, as 2.0 has little documentation for newbies so far) in order to facilitate modules. And I'm using TypeScript's namespacing to use external modules on the AES side.

It works, even if it seems a bit kludgey. I can write TypeScript for both sides and have it all transpiled correctly on the fly. External modules work on both sides now, so I can have classes in their own files, etc.

The problem

The first project is a simple one: For Illustrator, list a bunch of .ai files in a local directory recursively (in a <select multiple> element) so the user can filter them with a search box, select the one(s) they want, then click a button to have AI open those files. My issue is trying to get that list of files. It seems that the only way to get a list of files is through Node.js' "fs" function. Well, SystemJS doesn't seem to allow the use of Node.js' core functions. And I cannot find any other way for it to simply grab that list of files in a folder.

As it is, I'll have to set it up so that the panel, upon initializing, calls an AES function to get those files (via Folder(rootFolder).getFiles();) and return them back to the panel via JSON. Then, when the user hits the button to open the files, the panel calls another AES function to actually open them. Is there any way I can avoid that first AES call to have the panel's JS just get the list of files directly, itself?

I apologize for this long-winded question, thus the summary at the beginning. I just felt that it might help give some context to the problem if I explained what I am attempting to accomplish. Feel free to have a look at my project, if you wish, to help you understand a bit more.

    This topic has been closed for replies.

    2 replies

    rashidg36532863
    rashidg36532863
    Participating Frequently
    October 19, 2018

    Hello Sturm359,

    ​I although had the same problems than you and I started to work on a new workflow that helps this kind of "separate context" situation with a "mixed context" approach.

    ​

    ​If you're interested I have a quick article about it here :

    ​Mixed context in Adobe CC extensions with CEP · b...

    ​

    ​The repo linked to this article is not maintained anymore : GitHub - bigarobas/plugincc: Toolbox for building...

    ​

    ​But I satrded a new cleaner repo which is not really public yet (it's public but I don't "promote" it)  and where I implement some of the advice I had from the community. It lacks documentation and examples (I'm working on it) : GitHub - bigarobas/JSXBridge

    ​

    ​Let me know if you're interessted and if it can be usefull to you.

    ​

    ​Good luck

    ​

    ​

    ​

    ​

    ​

    ​

    Sturm359
    Sturm359Author
    Inspiring
    October 19, 2018

    Thanks for replying, rashidg36532863.

    I looked at that "Mixed context" link and rapidly became glassy-eyed. It's probably a bit more complicated than I need, and I'm not really even sure if it would help at all. I appreciate being given some other options, but I'll have to look further into this before I decide if it's going to help in this situation.

    Trevor:
    Trevor:
    Legend
    October 21, 2018

    CEP like ExentScript has it's own file API.

    Normally one would ignore that API and just use Node's fs functions but while one's eye's are still starry you can use the API.

    The API is accessed using window.cep.fs

    On my CSTK var n; for(n in window.cep.fs) __log(n) produces

    NO_ERROR

    ERR_UNKNOWN

    ERR_INVALID_PARAMS

    ERR_NOT_FOUND

    ERR_CANT_READ

    ERR_UNSUPPORTED_ENCODING

    ERR_CANT_WRITE

    ERR_OUT_OF_SPACE

    ERR_NOT_FILE

    ERR_NOT_DIRECTORY

    ERR_FILE_EXISTS

    showOpenDialog

    showOpenDialogEx

    showSaveDialogEx

    readdir

    makedir

    rename

    stat

    readFile

    writeFile

    chmod

    deleteFile

    The bold ones are the methods, unlike node they are all sync.

    So to get the dir contents use

    var files = window.cep.fs.readdir('/Path/to/folder');
    if (files.err) {
        // Panic and handle the error
    } else {
        files = files.data; // Array of the files
    }

    HTH

    Trevor

      L
      Community Expert
      LaubenderCommunity Expert
      Community Expert
      October 19, 2018

      Sturm359  wrote

      … As it is, I'll have to set it up so that the panel, upon initializing, calls an AES function to get those files (via Folder(rootFolder).getFiles();) and return them back to the panel via JSON. Then, when the user hits the button to open the files, the panel calls another AES function to actually open them. Is there any way I can avoid that first AES call to have the panel's JS just get the list of files directly, itself? …

      Hi,

      don't think you can avoid this.

      The ExtendScript part has access to the file system so you will handle all things concerning files and folders there.

      However, I could be wrong…

      Regards,
      Uwe

      Sturm359
      Sturm359Author
      Inspiring
      October 19, 2018

      I remember seeing somewhere that the HTML Panel can use Node.js, which means I should be able to use its built-in function "fs". However, if I want to use external modules, I have to use something like SystemJS. And SystemJS doesn't let me use Node.js' stuff, as I mentioned. Unless there's some alternative to SystemJS that I can use. As far as I am aware, CEP doesn't support CommonJS. And I've tried Webpack without success (although, being a newbie, that may just be because I don't know it well enough to use it properly). Thus, I've asked for help with how to "properly" utilize TypeScript with an Adobe CEP project.

      rashidg36532863
      rashidg36532863
      Participating Frequently
      October 19, 2018

      HTML panel can use nodejs (I think it also depends on your CEP version).

      You have to enable it in your manifest.xml :

      <CEFCommandLine>

         <Parameter>--enable-nodejs</Parameter>

         <Parameter>--mixed-context</Parameter>

      </CEFCommandLine>

      And then you can require fs modul in JS context :

      var node_fs = require('fs');

      and use it :

      var result = node_fs.readFileSync('your_path','utf8');

      You'll find all the details in the NodeJS part of CEP documentation :

      CEP-Resources/CEP 8.0 HTML Extension Cookbook.md at master · Adobe-CEP/CEP-Resources · GitHub

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