Issue to access local files with my plugin - Cannot find path

Photoshop UXP Plugin API
1

Hi, I’m trying to get my plugin to access your own files and add a .psd file to my active document.

However, unfortunately it cannot find the file, even though the path is correct.

This is my code:

import React, { useState } from 'react';
const { app, batchPlay } = require("photoshop");
const { storage } = require('uxp');

export default function HeaderSelector() {
    const [selectedHeader, setSelectedHeader] = useState(null);

    const handleHeaderSelect = async (header) => {
        console.log('Header selecionado:', header);
        setSelectedHeader(header);

        // Caminho completo para o arquivo de cabeçalho específico dentro do diretório do plugin
        const headerFilePath = `./src/assets/${header}.psd`;
        console.log('Caminho do arquivo:', headerFilePath);

        // Caminho para o diretório do plugin
        const pluginDir = await storage.localFileSystem.getPluginFolder();

        // Função para modificar o documento ativo
        const modifyDocument = async () => {
            try {
                // Obtém a entrada do arquivo de cabeçalho
                const fileEntry = await pluginDir.getEntry(headerFilePath);
                console.log('Arquivo encontrado:', fileEntry);

                // Lê o conteúdo do arquivo de cabeçalho
                const contents = await fileEntry.read({ format: storage.formats.binary });

                // Envia um comando para o Photoshop para inserir o conteúdo como uma nova camada
                const result = await batchPlay(
                    [
                        {
                            _obj: "placedLayerFromFile",
                            fileName: fileEntry.nativePath,
                            antiAlias: true,
                            width: 100, // Defina a largura da camada conforme necessário
                            height: 100, // Defina a altura da camada conforme necessário
                            link: false,
                        },
                    ],
                    {
                        synchronousExecution: false,
                        modalBehavior: "execute",
                    }
                );

                console.log('Cabeçalho inserido com sucesso!', result);
            } catch (error) {
                console.error('Erro ao inserir o cabeçalho:', error);
            }
        };

        // Executa a função de modificação
        await modifyDocument();
    };

    return (
        <>
            <sp-picker>
                <sp-menu-item onClick={() => handleHeaderSelect('SB')}>SB</sp-menu-item>
                <sp-menu-item onClick={() => handleHeaderSelect('CON')}>CON</sp-menu-item>
                <sp-menu-divider></sp-menu-divider>
                <sp-menu-item onClick={() => handleHeaderSelect('Alienware')}>Alienware</sp-menu-item>
                <sp-menu-item onClick={() => handleHeaderSelect('Gaming')}>Gaming</sp-menu-item>
                <sp-menu-divider></sp-menu-divider>
                <sp-menu-item onClick={() => handleHeaderSelect('Outlet')}>Outlet</sp-menu-item>
                <sp-menu-item onClick={() => handleHeaderSelect('Experts')}>Experts</sp-menu-item>
            </sp-picker>
            {selectedHeader && <p>Selecionado: {selectedHeader}</p>}
        </>
    );
}

This is my permission on manifest.json

  "requiredPermissions": {
    "allowCodeGenerationFromStrings": true,
    "localFileSystem": "plugin"
  }

And, this is the error console gave to me:

Erro ao inserir o cabeçalho: Error: Could not find an entry of 'plugin:/src/assets/SB.psd'
at Object._getEntryImpl (uxp://uxp-internal/webfs_scripts.js:2)
at async Object.getEntry (uxp://uxp-internal/webfs_scripts.js:2)

My file path is:
plugin-folder/src/assets/all-headers.psd

There were other times when the console gave me something like “plugin:” in front of my path. Would I need to define something else for it to work correctly? Or do I need other permissions for the plugin to access the path?

Thanks

2

The solution was very simple, but it could help some programmers in the future.

I had to add some console.logs to get to this solution

By default I set my ./dist folder to the plugin. Therefore, the assets should be in ‘plugin:/dist/assets/file-you-want.psd’