Placing image in the photoshop document, NOT WORKING!

Hello everyone,

I’m currently developing a panel aimed at importing images from URLs into the active Photoshop document. Although the script runs without errors on my end, the imported image doesn’t appear in the document as intended, check the screenshot below :

I’m attaching the script for your reference. I’d greatly appreciate any assistance or suggestions for resolving this issue, whether through code edits or alternative solutions.
Thank you! :pray:

// panel.js

document.getElementById('importButton').addEventListener('click', async () => {
    const imageUrl = document.getElementById('imageUrl').value.trim();
    const urlPattern = /^((http[s]?|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+[^#?\s]+)(.*)?(#[\w\-]+)?$/;

    if (!urlPattern.test(imageUrl)) {
        alert('Please enter a valid image URL.');
        return;
    }

    try {
        console.log('Fetching image from URL:', imageUrl);
        const response = await fetch(imageUrl);

        if (!response.ok) {
            throw new Error('Failed to fetch image. Please check the URL and try again.');
        }
        
        const blob = await response.blob();
        const mimeType = blob.type;
        console.log('Fetched image blob:', blob);

        const uxp = require('uxp');
        const fs = uxp.storage.localFileSystem;

        const tempFolder = await fs.getTemporaryFolder();
        const tempFile = await tempFolder.createFile('tempImage.png', { overwrite: true });
        await tempFile.write(blob);

        // Get the file token
        const fileToken = await fs.createSessionToken(tempFile);

        // Access Photoshop ActionManager
        const { action, core } = require('photoshop');
        const batchPlay = action.batchPlay;

        // Execute batchPlay within a modal scope
        await core.executeAsModal(async () => {
            // Place the image into the current document using batchPlay
            const result = await batchPlay(
                [
                    {
                        _obj: "placeEvent",
                        null: {
                            _path: fileToken,
                            _kind: "local"
                        },
                        _place: {
                            _x: 100, // X coordinate where the image should be placed
                            _y: 100, // Y coordinate where the image should be placed
                        }
                    }
                ],
                { synchronousExecution: true }
            );

            console.log('Image placed successfully');
        });

        // Clean up temporary file after placing the image
        await tempFile.delete();
    } catch (error) {
        console.error('Error importing image:', error);
        alert('Failed to import image. Please try again later.');
    }
});

UDT just won’t show you errors in async functions. Sometimes console.log on random occasion does not work either.

I couldn’t pinpoint the issue. Can anyone lend a hand ?

Oh, Problem solved ! :pray:

You marked “Oh, Problem solved !” as a solution, but that’s nowhere near a solution. Please either select a post, which provides actual solution that helped you solve the problem, or explain what you did to solve it and then mark your post as a solution :pray:

1 Like

The tempFile.write(blob) might need to be tempFile.write(blob.stream()) because blob might not be directly writable.

Hope this helpfull for anyone facing the same issue.

1 Like