Adobe Photoshop UXP

Building Plugins

• Adobe UXP Photoshop Plugins
• UX patterns
• Adobe Spectrum DLS
• Adobe Spectrum Web Components
• UXP API Reference
• Photoshop API
• Adobe UXP: Things You Need To Know by Davide Barranca Blogs
• Adobe UXP: Things You Need To Know by Davide Barranca Video Playlist

Dev Tools

• Devtools CLI
• CC Ext UXP Types type definitions for Adobe UXP, install with npm i @adobe/cc-ext-uxp-types
• Alchemist for Photoshop tool for inspecting batch/actions in photohshop for plugin development. Build from source, not the store version.

Working with the Local Filesystem

• File System Provider

Where to Store Files

• FIle I/O Docs
• Local Filesystem Permissions

{
    "requiredPermissions": {
        "localFileSystem": "request" # request, plugin, or fullAccess
    }
}

type	description	how to access	read	write
user	Gets a folder from the file system via a folder picker dialog.	getFolder().getEntries()	x	x
system	Returns a temporary folder. The contents of the folder will be removed when the extension is disposed.	getTemporaryFolder()	x	x
system	Returns a folder that can be used for extension's data storage without user interaction. It is persistent across host-app version upgrades.	getDataFolder()	x	x
system	Returns an plugin's folder – this folder and everything within it are read only. This contains all the Plugin related packaged assets.	getPluginFolder	x

~/Library/Application\ Support/Adobe/UXP/PluginsStorage/PHSP/25/Developer/ppw/PluginData/ is an exxample for getDataFolder() on mac

• https://forums.creativeclouddeveloper.com/t/how-to-read-json-and-save-json-to-appdata-roaming/6051/5
• https://forums.creativeclouddeveloper.com/t/storage-scheme-differences/5434

Get a File Entry

createEntry gets the file entry object, not the actual file on disk. If the file doesn't exist it will create a file entry object for read/write.

overwrite true will allow write if it exists, false will silently skip writing

const settingsFile = /** @type {storage.File} */ (
    await dataFolder.createEntry(filename, {
        overwrite: false,
        type: storage.types.file, 
    })
);

Read File Contents

[!CAUTION] throws error: Error: no such file or directory if file doesn't exist

// https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-js/Modules/uxp/Persistent%20File%20Storage/File/#readoptions
const fileContents = await settingsFile.read();

// 

Write File Contents

append true will append, false will overwrite

[!TIP] If the file is not writable it silently skips writing

await settingsFile.write(JSON.stringify(defaultContents), {
    append: false,
});

Migrating From Legacy Plugins

• UXP Migration Guides

ps-es-to-uxp

1. create a file with this code

   var mainScriptPath = Folder($.fileName).parent.parent ; 
   $.evalFile(new File(mainScriptPath + '/ad-to-uxp.jsx'));
   

2. copy the ad-to-uxp.jsx file into the same folder as the main script

3. run the main script

Web Components

https://forums.creativeclouddeveloper.com/t/sp-radio-group-react-issues-onchange-vs-oninput-vs-onclick/3109/2

• Native events don't fire in React, use the WC.jsx from the sample codeS