Writing a file with UXP

In this tutorial, you will enhance your plugin by adding a button to export a .tsv file that lists all your document's layers including some details.

Prerequisites

This tutorial builds on top of the plugin from the previous tutorial.

Step 1: Adjust the `index.html`

In this tutorial, we want to add a new function to the plugin: Exporting a .tsv file.

To support this in your UI, adjust your index.html file to include another section with another button <sp-button id="btnExport" />:

<!DOCTYPE html>
<html>
  <head>
    <script src="index.js"></script>
  </head>
  <style>
    body {
      color: white;
      padding: 0 16px;
    }
  </style>
  <body>
    <sp-heading>Layers</sp-heading>
    <sp-heading size="S">Rename layers</sp-heading>
    <sp-body size="S"> Rename layers to contain their opacity. </sp-body>
    <sp-button id="btnRename">Rename Layers</sp-button>
    <sp-heading size="S">Export Report</sp-heading>
    <sp-body size="S"> Export a report of all layers in the document. </sp-body>
    <sp-button id="btnExport" variant="secondary">Export Report</sp-button>
  </body>
</html>
Copied to your clipboard
1<!DOCTYPE html>
2<html>
3  <head>
4    <script src="index.js"></script>
5  </head>
6  <style>
7    body {
8      color: white;
9      padding: 0 16px;
10    }
11  </style>
12  <body>
13    <sp-heading>Layers</sp-heading>
14    <sp-heading size="S">Rename layers</sp-heading>
15    <sp-body size="S"> Rename layers to contain their opacity. </sp-body>
16    <sp-button id="btnRename">Rename Layers</sp-button>
17    <sp-heading size="S">Export Report</sp-heading>
18    <sp-body size="S"> Export a report of all layers in the document. </sp-body>
19    <sp-button id="btnExport" variant="secondary">Export Report</sp-button>
20  </body>
21</html>

The resulting panel looks like this:

Photoshop panel with two buttons: "Rename Layers" and "Export Report"

Step 2: Add the new function to the `index.js`

To export the file, you need to do two things:

create a string with the desired content of the file. This works the same as in the previous tutorials using the DOM APIs from the window.require('photoshop') module.
Use the UXP APIs, which you can access using window.require('uxp'), to ask the user for a location to save the file and save a file with the desired content to that location.

Add the following code to your existing index.js file:

// [...]

async function exportReport() {
    // create the TSV string
    let tsvString = "Base name\tOpacity\tIs visible";

    const app = window.require("photoshop").app;
    app.activeDocument.layers.forEach((layer) => {
        tsvString +=
            "\n" +
            layer.name +
            "\t" +
            layer.opacity +
            "\t" +
            (layer.visible ? "yes" : "no");
    });

    // save the string to the filesystem
    const storage = window.require("uxp").storage;
    const file = await storage.localFileSystem.getFileForSaving("layers.tsv");
    await file.write(tsvString);
}

document.getElementById("btnExport").addEventListener("click", exportReport);
Copied to your clipboard
1// [...]
2
3async function exportReport() {
4    // create the TSV string
5    let tsvString = "Base name\tOpacity\tIs visible";
6
7    const app = window.require("photoshop").app;
8    app.activeDocument.layers.forEach((layer) => {
9        tsvString +=
10            "\n" +
11            layer.name +
12            "\t" +
13            layer.opacity +
14            "\t" +
15            (layer.visible ? "yes" : "no");
16    });
17
18    // save the string to the filesystem
19    const storage = window.require("uxp").storage;
20    const file = await storage.localFileSystem.getFileForSaving("layers.tsv");
21    await file.write(tsvString);
22}
23
24document.getElementById("btnExport").addEventListener("click", exportReport);

Note the async and await keywords. We need them as the UXP storage APIs are asynchronous. We therefore need to await their execution.

After reloading the plugin, you get presented with a file picker when clicking the "Export Report" button:

A native Windows 10 file saving dialog with a file type "TSV" and a pre-selected name "layers.tsv"

Note that this uses the string passed into getFileForSaving(defaultName) as the default name and also derives the supported file type from it.

When you open the exported file in Excel, you can see the list of layers with their properties:

Excel table with the columns "Base name", "Opacity", and "Is visible" and the layers as rows

Next steps

You now know how to use the APIs provided by UXP to interact with the file system. But UXP allows you to do a lot more: Performing network requests, saving preferences using localStorage, get operating system information, open external urls, and much more. We encourage you to take a look at UXP's API Reference to get an overview of everything you can do.

To learn how to distribute your plugin, take a look at Sharing Your Plugin.

Editing the document

The UXP manifest