Skip to main content
Inspiring
December 10, 2017
Answered

Open images in photoshop panel

  • December 10, 2017
  • 2 replies
  • 3411 views

I use references a lot when I'm drawing, and I'm trying to build an extension that will let me open images in a separate Photoshop panel to make things easier. But I've been driving myself nuts because I can't get images to appear in the panel at all. I eventually want to be able to drag and drop images as well copy and paste content in the panel, but right now, I'm just trying to open an image with a typical file input.

Here's the html:

<div id="content">

        <div class="ref">

            <div class="startmssg">

                <i class="fas fa-arrow-down fa-3x"></i>

                <p>Drag & drop reference images here</p>

            </div>

          <!--Element where I want to place the image-->

          <img class="refpic">

        </div>

    </div>

    <nav>

        <label class="topcoat-icon-button--large--quiet" title="Add new reference image file">

                <i class="fas fa-image fa-2x"></i>

               <!--The file input for the image-->

                <input type="file" id="openref" accept="image/*" multiple>

            </label>

        <button type="button" id="delref" class="topcoat-icon-button--large--quiet" title="Delete reference image">

                <i class="fas fa-trash-alt fa-2x"></i>

            </button>

        <button type="button" id="infobttn" class="topcoat-icon-button--large--quiet" title="Info">

                <i class="fas fa-info-circle fa-2x"></i>

            </button>

    </nav>

The jsx function:

function readImage(input) {

    if (input.files && input.files[0]) {

        var reader = new FileReader();

        reader.onload = function (e) {

            $('.refpic').attr('src', e.target.result);

        }

        $('.startmssg').hide();

        reader.readAsDataURL(input.files[0]);

    }

}

And the main.js file:

$("#openref").change(function () {

            csInterface.evalScript('readImage(this)');

        });

The code above works in jsfiddle, but not in the panel. I can't figure out what I'm doing wrong.

This topic has been closed for replies.
Correct answer Ten A

That doesn't seem to help. The dialog window doesn't open and nothing shows up on the console. I can't shake the feeling that there's something else I'm supposed to have installed. I skipped over the section on node.js when I was reading the CEP resources. Is that something I need to work with the CEP Engine?

Edit:

I decided to edit the log level to see if more information would help narrow down why the code wasn't working, and it looks it's receiving data when I click the file button. There's a "CEPHtmlEngine receives data from PlugPlug" message logged for each click.

Also, I don't know if it's related, but there's another message saying "Could not get the download directory" in the same log.


Here is a working minimal sample extension you can download.

dialogTest.zip - Google Drive

2 replies

Participant
September 23, 2023

Nfb indian churn dbc ibf fnxj

Ten A
Community Expert
Community Expert
December 11, 2017

CEPs JavaScript can pass to ExtendScript only String. In your code, ExtendScript can't resolve "this".

Additionally, input tag can't get the path. However, we can use showOpenDialog() in CEPEngine extension.

You can reference below

CEP-Resources/CEPEngine_extensions.js at master · Adobe-CEP/CEP-Resources · GitHub

p.s. EB3 already stop to develop and this forum will freeze. However, we have new Extensions and developers forum.

Extensions / Add-ons Development

Inspiring
December 11, 2017

Thanks for the response. I'd tried file.openDialog() in my first attempt (which I think is still part of ExtendScript). So, I'll look into showOpenDialog(). Should I repost this question on the newer forum instead?

Ten A
Community Expert
Community Expert
December 11, 2017

You don't need to repost it. I already requested to move this question to the new forum. This discussion will move there.