How to show a File Open / File Close Dialog in Adobe CEP

Showing an Open File Dialog or a Save File Dialog is fairly easy using the adobe CEP Node.js API. The first thing you need to do is enable nodejs. To do so add the following to your manifest.xml file:

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

SaveDialog

To open the save dialog, the showSaveDialogEx() function can be called anywhere in your panel’s Javascript code:

window.cep.fs.showSaveDialogEx(title: string, initialPath: string, fileTypes: string[], defaultName: string, friendlyFilePrefix: string, prompt: string, nameFieldLabel: string).

The below example code shows how to open a simple save dialog in the ~/test directory, showing only textfiles and prefilling the filename field with ‘filename.txt’. It is important to note that fileTypes is of type string[]. Calling the function with a string won’t open a file dialog. The path of the selected file can be retrieved by accessing the data field of the returned object:

var result = window.cep.fs.showSaveDialogEx(
      'Save File',
      '~/test,
      ['*.txt'],
      'filename.txt',
      '*.txt'
      'Save',
      'filename'
    );
console.log(result.data); // Prints the selected file path

OpenDialog

Similar to the aforementioned SaveDialog the showOpenDialogEx() method can be called anywhere in the CEP panels javascript code to display an open dialog. The full syntax is as follows: showOpenDialogEx(allowMultipleSelection: boolean, chooseDirectory: boolean, title: string, initialPath: string, fileType: string[], friendlyFilePrefix: string, prompt: string). Other than the SaveDialog the data field of the returned object is not of type string but an array as multiselection of files is possible if the allowMultipleSelection parameter is set to true.

var result = window.cep.fs.showOpenDialogEx(
      false,
      false,
      'Open',
      '~/test',
      ['*.txt'],
      '*.txt',
      'Open'
    );
console.log(result.data[0]) // Prints the selected file path

The above code will open the OpenFile Dialog. Only .txt files will be selectable and the selected file will be logged to the console.

Debugging Adobe Extensions

Debugging Adobe extensions can be quite cumbersome. The API documentation is split over several documents, and debugging can be quite complex when using tools such as the ExtendScript Toolkit. The ExtendScript Developer Tools can be a helpful tool when developing Adobe Extensions. It allows executing commands from within a panel in the Adobe Application you are developing for. By inspecting variables and functions it is much easier to understand the adobe APIs.

The extension can also be found on Adobe Exchange.