How to access filesystem from panel?

[Sturm359]

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.

[Laubender]

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]

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]

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

[Sturm359]

Thanks for the reply, rashidg36532863.

So I had mentioned that I am trying to use TypeScript, so I cannot use the require() syntax, as such. Thankfully, I had asked about how to "properly" implement TypeScript in an Adobe CEP project and was rewarded with a system that seems to work well enough for me. It, too, advises adding those two elements to the manifest.xml file.

[rashidg36532863]

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]

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:]

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

[Sturm359]

Thank you, Trevorׅ, for replying.

I was not aware of the window.cep.fs portion of the API; I guess I really need to read that cookbook a bit more closely, sorry. I was also given a way to use Node.js' "fs" module in another thread, so it seems I now have two ways to read the file system locally without having to call a JSX function! I'll give yours a try soon and, if it works, I'll mark it as the correct answer, since it will have given me access to read local file system directories. Thanks again!

[Trevor:]

As a general rule one should go for the Node method which is async but if one doesn't care about that or prefers sync (blocking) then one can use the API.

[Sturm359]

That's fair. In that case, I'll probably go with Node's, but just for completeness' sake, I thought I'd try the CEP API's version. Unfortunately, although it does exist, my IDE / TypeScript doesn't know that it exists.

I'm sure I could still use it, perhaps even by telling the TS compiler to ignore that line, but I'd hate to have to do that.