How to load an image into a document in InDesign?

InDesign
,
1

Hi,

I am making a plugin for fetching images from an online photo gallery and inserting them into a document in InDesign.

Currently, I am using two requests from the photo gallery API. The first one gives me previews of images and the second one can download an image based on an ID. The preview part of the plugin is implemented.

I want the user to be able to pick an image based on the previews and then somehow insert the image into their document. This could happen in different ways. For example a drag and drop from the preview gallery. However, I have no idea how to do this. Does anybody have experience with this scenario and suggestions on how to make it work? I am open to different approaches for inserting the image into the document.

I am using React.js and the UXP developer tool.

#pictures #images #gallery

1 Like
2

Unless it has changed, I don’t believe that drag and drop is supported in Adobe InDesign with UXP.

You can, however, find out if one or more frames have been selected if you want to verify a selected frame before activating the search. Then it is possible to import images to the selected frame(s).

You can also load the place gun with the image (or anything) to place.

jsw

1 Like
3

Thanks for your answer!

If I understand correctly, the place gun “loads” the mouse pointer and then the user can put the image anywhere in the document. Is this correct? If that’s the case then it seems to me that the place gun would be the most straightforward way for the user.

To use the place gun, do I need to download the image to be able to load the gun with it? If yes, is there a specific path we need to download the image to?

I also have one question regarding the second solution you proposed just in case. How does one import an image to a selected frame?

EDIT:
I started trying a bit and was able to download the image to the user’s desktop and obtain the path to the image. Then I made this loadGun function that I was hoping would enable the user to place the image into their document. I was expecting the mouse pointer to change in order to signal to the user that it now “contains” an image and that when I clicked on the canvas the picture would appear there. However, this did not happen. I don’t know what is wrong.

Here is the function:

import { fetchToken } from './AuthService';
import { downloadImg } from './MediaService';
import { useState, useEffect } from 'react';
const { app } = require('indesign');

export default async function loadGun(id) {
  const [imagePath, setImagePath] = useState('');
  useEffect(() => {
    fetchToken().then(async (accessToken) => {
      if (accessToken !== null) {
        const imagePath = await downloadImg(accessToken, id);
        setImagePath(imagePath);
      }
    });
  }, []);

  const loadedGun = app.loadPlaceloadedGun(imagePath);
  return loadedGun;
}

I am calling this function from the main-component, but not inside the HTML. Can you see what’s wrong here?

Home.jsx:

import React, { useState } from 'react'; 
import { Gallery } from './Gallery.jsx';
import { WC } from './WC.jsx';
import loadGun from '../services/LoadGun.ts';
import './Home.css';

export function Home() {

  const imageId = 'eUyjYWtlF4M'
  const gun = loadGun(imageId);

  return (
    <div>
      <WC>
        <Gallery />
      </WC>
    </div>
  );
}
4

In my case, with UXP in Adobe InDesign, I’m making sure I don’t have any selection, and then with a reference to a document in docRef_o using docRef_o.place(file_f) where file_f is a File object. I’m assuming your imagePath is just a string of a path?

That same .place method can instead be used on a frame. So if theIntendedFrame is a reference to the frame to place the image into: theIntendedFrame.place(file_f); should work.

jsw

5

Yes, imagePath is just a string of a path.

I don’t understand exactly what you mean. I thought that the place gun would load my mouse pointer so that I could insert the image anywhere on the document. Is this not correct?

It seems that you are using place() instead? What does this do? I can’t find it in the documentation: https://developer.adobe.com/indesign/dom/api/p/PlaceGun/

How do you obtain the file object for the place function?

6

I solved this by downloading the image to the computer and putting the file in this command: docRef_O.place(file) where docRef_O = app.activeDocument. I get app by using: const { app } = require('indesign').

Like medium_jon said I also needed to remove any selection of frame which I did by running this: app.selection = null