Need Help Integrating Photoshop API into a Web App

537 Views Asked by At

I am trying to integrate photoshop API into a web app. At the very basic stage, I have an express app with a simple /upload endpoint which does the following:

  1. Gets a link to an image, and a photoshop Action from my dropbox. I used the SDK and referred to the docs here https://www.dropbox.com/developers/documentation/http/documentation#files-get_temporary_link.
  2. Gets an upload link from dropbox in the similar manner as described above following the docs from https://www.dropbox.com/developers/documentation/http/documentation#files-get_temporary_upload_link
  3. Using the photoshop API reference from here https://developer.adobe.com/photoshop/photoshop-api-docs/api/#operation/photoshopActions , I tried to execute an action from the Adobe Photoshop API (Trial).

The following code is where the main part lies:

app.post('/upload', upload.any() , async (req, res, next) => {
    // console.log(req.files);
    try {
        const file = req.files[0];
        const fileData = await getFileLink('/scott.jpg');
        const fileLink = fileData.result.link;
        const actionData = await getFileLink('/Black-White-Sample.atn');
        const actionLink = actionData.result.link;
        const uploadLink = await getUploadLink();

        const response = await fetch('https://image.adobe.io/pie/psdService/text', {
            method: 'POST',
            headers: {
                Authorization: `Bearer ${ADOBE_ACCESS_TOKEN}`,
                "x-api-key": ADOBE_CLIENT_ID,
                "Content-Type": "application/json"
            },
            body: {
                inputs: [
                            {
                                storage: "dropbox",
                                href: fileLink
                            }
                        ],
                options: {
                    actions: [
                        {
                            storage: "dropbox",
                            href: uploadLink
                        }
                    ]
                },
                outputs: [
                    {
                        storage: "dropbox",
                        type: 'image/png',
                        href: `${uploadLink}`
                    }
                ]
                }
        });    
        res.send('success');
    } catch(err) {
        console.log('ERROR XOXOXOXO' + err);
    }
}, (err) => {
    console.log(err);
})

I am getting a 500 Internal Server Error. The request does not throw an error, sends the 'success' message and response. And the way the response is structured, I can't figure out anything. Been trying for hours, googling around and what not. But there seems to be no resource at all that does something like this. The response I am getting is:

RESPONSE ===================
Body {
  url: 'https://image.adobe.io/pie/psdService/photoshopActions',       
  status: 500,
  statusText: 'Internal Server Error',
  headers: Headers {
    _headers: {
      server: [Array],
      date: [Array],
      'content-type': [Array],
      'content-length': [Array],
      connection: [Array],
      'access-control-allow-credentials': [Array],
      'access-control-allow-headers': [Array],
      'access-control-allow-methods': [Array],
      'access-control-allow-origin': [Array],
      exposeheaders: [Array],
      'strict-transport-security': [Array],
      'x-request-id': [Array]
    }
  },
  ok: false,
  body: PassThrough {
    _readableState: ReadableState {
      objectMode: false,
      highWaterMark: 16384,
      buffer: BufferList { head: [Object], tail: [Object], length: 1 },
      length: 236,
      pipes: [],
      flowing: null,
      ended: true,
      endEmitted: false,
      reading: false,
      constructed: true,
      sync: false,
      needReadable: false,
      emittedReadable: false,
      readableListening: false,
      resumeScheduled: false,
      errorEmitted: false,
      emitClose: true,
      autoDestroy: true,
      destroyed: false,
      errored: null,
      closed: false,
      closeEmitted: false,
      defaultEncoding: 'utf8',
      awaitDrainWriters: null,
      multiAwaitDrain: false,
      readingMore: false,
      dataEmitted: false,
      decoder: null,
      encoding: null,
      [Symbol(kPaused)]: null
    },
    _events: [Object: null prototype] { prefinish: [Function: prefinish] },
    _eventsCount: 1,
    _maxListeners: undefined,
    _writableState: WritableState {
      objectMode: false,
      highWaterMark: 16384,
      finalCalled: true,
      needDrain: false,
      ending: true,
      ended: true,
      finished: true,
      destroyed: false,
      decodeStrings: true,
      defaultEncoding: 'utf8',
      length: 0,
      writing: false,
      corked: 0,
      sync: false,
      bufferProcessing: false,
      onwrite: [Function: bound onwrite],
      writecb: null,
      writelen: 0,
      afterWriteTickInfo: null,
      buffered: [],
      bufferedIndex: 0,
      allBuffers: true,
      allNoop: true,
      pendingcb: 0,
      constructed: true,
      prefinished: true,
      errorEmitted: false,
      emitClose: true,
      autoDestroy: true,
      errored: null,
      closed: false,
      closeEmitted: false,
      [Symbol(kOnFinished)]: []
    },
    allowHalfOpen: true,
    [Symbol(kCapture)]: false,
    [Symbol(kCallback)]: null
  },
  bodyUsed: false,
  size: 0,
  timeout: 0,
  _raw: [],
  _abort: false
}

The dropbox functions are:

async function getFileLink(path) {
    try {
        const fileLink = await dbx.filesGetTemporaryLink({path: path});
        // console.log(fileLink);
        return fileLink;
    } catch(err) {
        console.log(err);
    }

}
async function getUploadLink() {
    try {
        const res = await dbx.filesGetTemporaryUploadLink({
            commit_info: {
                autorename: true,
                mode: 'add',
                mute: false,
                path: '/New Folder',
                strict_conflict: false
            }
        })
        return res.result.link
    } catch(err) {
        console.log(err);
    }
}

What am I doing wrong? I don't think it's related to the Trial version of the API thing. And I really don't have anything else left to check from my side. Any sort of help from someone experienced would be highly appreciated.

1

There are 1 best solutions below

1
TanvirAhmedKhan On

Are you requesting on https://image.adobe.io/pie/psdService/text or https://image.adobe.io/pie/psdService/text ? I think you may want to try example 16 to run actions.