Why "getFileForOpening" on a button in a Panel wont work?

My Plugin contains several buttons which are meant for the users to select an Image from their computer:

I am coming up with a problem in eventListeners and getFIleForOpening. In case of my plugin. If I click on select button I must come up with selecting a file from my local system.
In my main.js:
My button id is #bg-b and I added eventListener to function bgImage().
In my function I used getFileForOpening and ImageFill.

But my plugin does nothing, if I click on select button. Could anybody help me with that?

Here is my code:

const { Text, Color } = require("scenegraph");
const fs = require("uxp").storage.localFileSystem;
async function bgImage() {
  const bgImg=await fs.getFileForOpening({types: storage.fileTypes.images});
  let fill=new ImageFill(bgImg)
  selection.items[0].fill=fill;
selection.insertionParent.addChild(bgImg);
bgImg.placeInParentCoordinates({x:0,y:0},selection.insertionParent.localCenterPoint);
return bgImg;
}
async function fgImage() {
  const {selection} = require("scenegraph");
  const fgImg = await fs.getFileForOpening({allowMultiple: true, types: fileTypes.images});
    if (fgImg.length === 0) {
      console.log("please select an image")
    }
selection.insertionParent.addChild(fgImg);
fgImg.placeInParentCoordinates({x:0,y:0},selection.insertionParent.localCenterPoint);
return fgImg;
}
async function createText(text, { color = "blue" } = {}) {
  const { selection} = require("scenegraph");
  const { Text, Color } = require("scenegraph");
  const newText = new Text();
  newText.text = text;
  newText.fill = new Color(color);
  selection.insertionParent.addChild(newText);
  newText.placeInParentCoordinates({x: 0, y: 0}, selection.insertionParent.localCenterPoint);
  return newText;
}
let panel;
function create() {
  const HTML = `<style>
            #title{
              font-size: 14px;
              font-weight:Bold;
            }
            .break {
              flex-wrap: wrap;
          }
          label.row > * {
              margin: auto;
              margin-bottom:10px;
          }
          label.row > span {
              color: #8E8E8E;
              width: auto;
              text-align: left;
              font-size: 9px;
          }
          label.row input {
              flex: 1 1 auto;
          }
          label.row input[type=number] {
              flex-basis: 32px;
          }
          label.row input[type=text] {
            flex-basis: 32px;
          }
          div input[type=checkbox] {
              flex: 0 0 20px;
          }
          form footer > * {
              position: relative;
              left: 8px;
          }
        </style>
        <form method="dialog" id="main">
        <label class="row" id="title">
            <span font-size="20px">Quick Parallax</span>           
        </label>
        </br>
        <div class="row break">
            <label class="row" id="bg">
            <span>Select Background</span>
            <button id="bg-b" type="button" uxp-variant="cta">Select</button>
            </label>
        </br>
        <div class="row break">
            <label class="row" id="fg">
            <span>Select Foreground</span>
            <button id="fg-b" type="button" uxp-variant="cta">Select</button>
            </label>
        </br>
        <div class="row break">
            <label class="row" id="txt">
            <span>Foreground Text</span>
            <input type="text" uxp-quiet="true" id="txt_bx" value="" placeholder=""/>
            </label>
        </br>    
        </div>
        </div>
        <footer><button id="ok" type="submit" uxp-variant="cta">Create</button>
        <button id="cancel" type="submit" uxp-variant="cta" background-color:"#E54C4C" >Cancel</button></footer>
        </form>
        `;
  panel = document.createElement("div");
  panel.innerHTML = HTML;
  panel.querySelector("#bg-b").addEventListener("button", bgImage);
  panel.querySelector("#fg-b").addEventListener("button", fgImage);
  panel.querySelector("#ok").addEventListener("submit", createText);
  return panel;
}
function show(event) {
  // create panel the first time it's shown
  if (!panel) {
    panel = create();
    event.node.appendChild(panel);
  }
}
function hide(event) {
  // in this example, we don't need to do anything when XD hides our panel
}
function update(selection, root) {
  console.log(selection.items);
}
module.exports = {
  panels: {
    panelName: {
      show,
      hide,
      update
    }
  }
};

You are not importing storage.

const storage = require("uxp").storage;

In the function fgImage() write types: storage.fileTypes.images instead of types: fileTypes.images.

I did that. It ends up with the same thing. :frowning:
I think the problem is with event listeners.
Adobe-XD-2020-02-06-22-30-46

There are multiple errors in your code.

panel.querySelector("#bg-b").addEventListener("button", bgImage);

button is not an event. It should be:

panel.querySelector("#bg-b").addEventListener("click", bgImage);

Try to learn the basics of JavaScript and use the Developer Console in Adobe XD.

2 Likes

Thanks for that! :slight_smile:
Iā€™ll learn the basics first xD !

2 Likes