Uploading Active Document as Image File Using Adobe UXP

Photoshop
,
1

Hi everyone,

I’m working on a plugin for Adobe Photoshop (version 2023) using the UXP API and I’m facing an issue regarding uploading the currently active document as an image file to a remote server. My goal is to convert the active document into a PNG file and then perform an HTTP POST request to upload it.

Here’s what I’ve tried so far:

  1. Convert the active document to PNG format: I managed to use the batchPlay operations to save the active document locally as a PNG file. However, I want to dynamically generate a temporary folder and file to avoid hardcoding paths and to ensure better compatibility across different environments. Here is the code snippet for that part:

    const fs = require("uxp").storage.localFileSystem;
const os = require("os");

async function saveActiveDocumentAsPNG() {
  const tempFolder = await fs.getTemporaryFolder();
  const tempFilePath = await tempFolder.createFile("temp_image.png", { overwrite: true });
  const token = await fs.createSessionToken(tempFilePath)
  const batchPlay = require("photoshop").action.batchPlay;
  const result = await batchPlay(
    [
      {
        _obj: 'save',
        as: {
          _obj: 'PNGFormat',
          quality: 12
        },
        in: {
          _path: token,
          _kind: "local",
        },
        documentID: app.activeDocument._id,
        copy: true,
        options: {
          _obj: 'saveOptions',
          compatibility: true
        }
      }
    ],
    { synchronousExecution: false }
  );

  return tempFilePath;
}

  2. Upload the image to the server: I am using the fetch API to upload the dynamically generated PNG file to the server. Here’s the code snippet:

    async function uploadImageToServer(filePath) {
  const formData = new FormData();
  formData.append("file", await filePath.read({ format: fs.formats.binary }));

  try {
    const response = await fetch('https://myserver.com/upload', {
      method: 'POST',
      body: formData
    });

    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error('Error uploading file:', error);
  }
}

However, I am getting file or directory not found error when trying to read from the saved file
Thank you for your help!