UXP: document saveAs method is not saving the document as a jpeg/png

Photoshop UXP Plugin API
,
1

Hi, we are trying to save the current document as jpeg/png in the temp folder and then read it as an ArrayBuffer for sending it on the API. Here is our code:

  const app = require("photoshop").app;
  const fs = await require("uxp").storage.localFileSystem;
  const formats = require("uxp").storage.formats;
  const currentDocument = app.activeDocument;
  const tempFolder = await fs.getTemporaryFolder();
  const file = await tempFolder.createFile("test.jpg", { overwrite: true });
  console.log(file, "fileToken");
  currentDocument.saveAs.jpg(
        file,
        {
          quality: 7,
        },
        true
      );
   const arrayBuffer = await file.read({ format: formats.binary });
   console.log(arrayBuffer, "arrayBuffer");

We have tried this without the temp folder too. Code for that:

  const app = require("photoshop").app;
  const fs = await require("uxp").storage.localFileSystem;
  const formats = require("uxp").storage.formats;
  const currentDocument = app.activeDocument;
  const file = await fs.getFileForSaving("test.jpg");
  console.log(file, "fileToken");
  currentDocument.saveAs.jpg(
        file,
        {
          quality: 7,
        },
        true
      );
   const arrayBuffer = await file.read({ format: formats.binary });
   console.log(arrayBuffer, "arrayBuffer");

But the issue is that the saveAs.jpg method doesn’t save the file at all. The file token is also generated correctly in both the cases. Just the saveAs method doesn’t create a file on the system.

Our manifest config:

 "version": "1.0.0",
  "main": "index.html",
  "manifestVersion": 4,
  "host": {
    "app": "PS",
    "minVersion": "23.0.0",
    "data": {
      "apiVersion": 2,
      "loadEvent": "use"
    }
  },
   "requiredPermissions": {
    "allowCodeGenerationFromStrings": true,
    "localFileSystem": "fullAccess"
  }

App versions that we are using:
Photoshop: 24.0
UXP dev tools: 1.7.0

Please let me know if you require any more details for the solution.
Thanks in advance.

2

Although I am not exactly sure what is causing the problem, try to pay attention to the following items.

  • use executeAsModal
  • Document.save.jpg() returns a promise, so add an “await” to it
const { app, core } = require('photoshop') ;
const { localFileSystem, formats } = require('uxp').storage ;

const readJpg = async () => {
  try {
    await core.executeAsModal(
      async (control) => {
        const tempFolder = await localFileSystem.getTemporaryFolder() ;
        const file = await tempFolder.createFile('test.jpg', {overwrite: true}) ;

        const currentDocument = app.activeDocument ;
        await currentDocument.saveAs.jpg(
          file,
          {
            quality: 7,
          },
          true
        ) ;

        const arrayBuffer = await file.read({format: formats.binary}) ;
        console.log(arrayBuffer, 'arrayBuffer') ;
      }, 

      {'commandName': 'readJpg'}
    ) ;
  } catch(e) {
    console.log(e) ;
  }
} ;
3

Thanks, we tried this but still facing the same issue.

4

What is the full absolute filepath of the file?

5

There is also new way to handle files. https://developer.adobe.com/photoshop/uxp/2022/uxp/reference-js/Modules/FileSystem/

(this works only in the most recent PS version I think)

1 Like
6

Now try setting manifestVersion to 5. requiredPermissions is supported from v5.

When I tried it, it may have worked stably after once I changed it to v5. After that, it also worked with v4.

"manifestVersion": 5,
"requiredPermissions": {
  "localFileSystem": "fullAccess"
},
7

We changed this but it still doesn’t work.
I don’t think it is permissions issue, because doing something like this

 const tempFolder = await localFileSystem.getTemporaryFolder();
 const file = await tempFolder.createFile("test.txt", { overwrite: true });
 file.write("qwerty");

creates a text file with qwerty as text.
It’s just the currentDocument.saveAs.png method that doesn’t create a file at all.

8

For temp folder approach, the nativePath is something like :
C:\Users\gunjan\AppData\Local\Temp\Adobe\UXP\PluginsStorage\PHSP\24\Developer\e26f73db\PluginData\test.png

For getFileForSaving approach, the nativePath is:
C:\Users\bangd\Documents\test.png

1 Like
9

Not sure how to save the document with these file instances. The save method that we are using (https://developer.adobe.com/photoshop/uxp/2022/ps_reference/classes/document/#saveas) requires a UXP File token (https://developer.adobe.com/photoshop/uxp/uxp/reference-js/Modules/uxp/Persistent%20File%20Storage/File/).

Do you know some other methods for saving the current document as a png/jpeg that can work with the file classes that you mentioned?

Thank you so much for helping.

10

Does that mean saveAs.jpg is working?

I guess saveAs.png needs to specify another save option (property ‘quality’ does not exist). The following code worked.

const readPng = async () => {
  try {
    await core.executeAsModal(
      async (control) => {
        const tempFolder = await localFileSystem.getTemporaryFolder() ;
        const file = await tempFolder.createFile('test.png', {overwrite: true}) ;

        const currentDocument = app.activeDocument ;
        await currentDocument.saveAs.png(
          file,
          {
            compression: 6,
          },
          true
        ) ;

        const arrayBuffer = await file.read({format: formats.binary}) ;
        console.log(arrayBuffer, 'arrayBuffer') ;
      }, 

      {'commandName': 'readPng'}
    ) ;
  } catch(e) {
    console.log(e) ;
  }
} ;
1 Like
11

Ok, so it is working for vanilla javascript based plugin and we are working with plugin in react. Not sure why it’s not working in react.

Do you have any input?

12

Trying to asynchronize functions that cannot be async, not adding await where it should be added, etc. These are the paths I have taken in the past.

However, I cannot say for sure without seeing your code.

13

Hi, exactly the the same issue over here. Did you finally solve it? @gunjan Thanks a lot!