Exporting files in UXP Photoshop react

Photoshop UXP Plugin API
,
1

Hello everyone!
hope you are doing great, I was trying to export a file from UXP, it seams that using plain Javascript the code down below works quite fine but once I switched to react it breaks on this line “const file = await storage.localFileSystem.getFileForSaving(“config.json”);” witout sending an error in the debugger, can you guys advise

const exportReport = async () => {
     let jsonString = [];
     app.activeDocument.layers.forEach((layer) => {
            let elOBJ = {};
            elOBJ.name = layer.name;
            elOBJ.opacity = layer.opacity;
            elOBJ.visible = layer.visible;
            jsonString.push(elOBJ);
     });

     // save the string to the filesystem
     const storage = await window.require("uxp").storage;
     const file = await storage.localFileSystem.getFileForSaving("config.json");
     await file.write(JSON.stringify(jsonString));
 }```
2

Are the ``` at the end of your code sample actually in the code, or is that a typo in the post? That’d be an issue if it’s in the code :smile:

That moving the code from vanilla js to react causes things to break is suspicious, as is the fact that you’re not getting anything in the debugger. One possible explanation is that something in your build system is causing the issue. Your particular Babel or TypeScript config might be transforming the code in unexpected ways.

You’ll want to identify:

  1. Is the code even running?
  2. Is the code running completely?
  3. Is the code hitting an error or is it working differently than you expect?

Can I debug at all?

Put a log statement before you call exportReport. Place another on the first line inside exportReport. Do you see these logs? If you do not see the first, you have a bigger problem. If you do not see the second, your function is not getting called. Likely, you’ll see both or neither.

Can I capture an exception?

Put everything inside exportReport inside a try/catch and log the caught error. Put a log statement after the try/catch that confirms the code has executed. When you run things, do you see an error in your logs? Great! GLHF.

No? Do you see your confirmation log from the end of the function?

If yes, you don’t have an error, the code is executing as expected, so you have to figure out what is wrong with the logic.

If no, start adding log statements after each line of code and see how far into exportReport you get before you stop seeing logs. Whatever log you don’t see, the line before it is the problem.

One more thing

Given that your code is async, it’s possible you’re in some sort of scenario where the promise never resolves. Testing with logs before an after the function call is helpful to understand whether things are fully completing or are just hung up.

Good luck!