The fetch api

Adobe XD UXP Plugin API
21

Have you added the domains permissions to the manifest.json? (needs to be v5).

22

Yes, it is manifest v5, and I have the “all” value:

  "requiredPermissions": {
      "network": {
          "domains": "all"      
      },

I am using vanilla JS, would that make a difference?

23

Hi @Symo470 , you also need to allow access to the file local system. This is how my manifest file looks like:

 "manifestVersion": 5,
  "host": [
    {
      "app": "PS",
      "minVersion": "23.3.0"
    }
  ],
  "requiredPermissions": {
    "localFileSystem": "fullAccess",
    "network": {
      "domains": "all"
    },
    "allowCodeGenerationFromStrings": true
  }, [...]
1 Like
24

Yes. I have these also. No idea why it isn’t working.

25

Have you tried adding a “try/catch” on the fetch call and see what the debugger returns?

1 Like
26

Hiya @AndresLP,
I’ve returned to this after a few weeks away, and immediately solved it. Just a simple typo in the URL! Sorry for wasting your time on that one…
Next question. Can the save be an “autosave”? ie. without a user clicking the button.

27

Hi @Symo470 , glad to hear you made it work.

About the auto-save, it should be possible but I haven’t looked into that option. If you make that work, please share the code here, good luck!

28

I don’t know that there is a save method for XD documents but you can use set interval to run code on a regular basis

You can set it on the show or hide method or at the global level it should run when the plug-in is started

29

One other comment. When working in async I would suggest you wrap the entire block in a try catch.

So with this (no pun intended):

  // Function to download file from url, save with user dialog, open in Photoshop
  async function downloadFileFromUrlAndOpen({ fileUrl, fileName }) {
    // Download file from url
    const request = new Request(fileUrl);
    const response = await fetch(request);
    const buffer = await response.arrayBuffer();

    // Save file to the filesystem
    const storage = require("uxp").storage;
    const file = await storage.localFileSystem.getFileForSaving(fileName);
    await file.write(buffer);
    try {
      await executeAsModal_openFile(file);
    } catch (e) {
      console.log(e);
    }
  }

Change to this:

  // Function to download file from url, save with user dialog, open in Photoshop
  async function downloadFileFromUrlAndOpen({ fileUrl, fileName }) {
    try {
       // Download file from url
       const request = new Request(fileUrl);
       const response = await fetch(request);
       const buffer = await response.arrayBuffer();

       // Save file to the filesystem
       const storage = require("uxp").storage;
       const file = await storage.localFileSystem.getFileForSaving(fileName);
       await file.write(buffer);
    
      await executeAsModal_openFile(file);
    } catch (e) {
      console.log(e);
    }
  }

I’ve also seen code that uses multiple try catch for separate operations.

  // Function to download file from url, save with user dialog, open in Photoshop
  async function downloadFileFromUrlAndOpen({ fileUrl, fileName }) {
    try {
       // Download file from url
       const request = new Request(fileUrl);
       const response = await fetch(request);
       const buffer = await response.arrayBuffer(); file);
    } catch (e) {
      console.log(e);
    }

   try {
       // Save file to the filesystem
       const storage = require("uxp").storage;
       const file = await storage.localFileSystem.getFileForSaving(fileName);
       await file.write(buffer); file);
    } catch (e) {
      console.log(e);
    }
    
    try {
      await executeAsModal_openFile(file);
    } catch (e) {
      console.log(e);
    }
  }
2 Likes
30

Thank you @Velara for your tips! :+1:

1 Like