CODEWITHSUNDEEP
dompolymer-1.0
Bazinga777
Bazinga777

Reputation: 5281

How to select an element inside a dom-module in polymer 1.0?

I have the following dom-module that I am trying to create interactions for. 

<dom-module is="bw-image-upload">
<template>
  <vaadin-upload  id="uploader"
                  target="{{ API_URL}}/images/upload"
                  method="POST"
                  max-files="1"
                  max-file-size="200000"
                  accept="image/*"
                  upload-success="uploadResponseHandler"
                  file-reject="errorHandler"
  >
  </vaadin-upload>
</template>
  <script>
      Polymer({
                is: 'bw-image-upload',
                properties: {
                      image: String,
                      notify: true
                }
              });

      var uploader = document.querySelector('#uploader');

      uploader.addEventListener('upload-before', function(event) {
            console.log(event);
      });

  </script>
</dom-module>

I want to select the vaadin-upload element by it's ID but it returns a null and I am confused on why it is returning null.

How do I select an element like this in Polymer?

Upvotes: 0

Views: 420

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657338

If the element has an id and is statically added to the template, you can use

var uploader = this.$.uploader;

to get a reference to an element with the id uploader.

If the element is inside <template is="dom-if">, <template is="dom-repeate"> or otherwise dynamically created this is not supported.

In such cases you can use

var uploader = this.$$('#uploader');

this.$$(...) provides full CSS selector support and returns the first matching element, while this.$... only supports IDs.

Upvotes: 2

Related Questions