CODEWITHSUNDEEP
javascriptpolymerweb-component
Raspel
Raspel

Reputation: 383

Access file selected with paper-input

I'm trying to upload a file chosen through a Polymer <paper-input type="file" id="filepicker"> element but when i try to access the file with:

var file = this.$.filepicker.files

i get a files is not defined error.

I haven't found any other methods to access files in paper inputs so I'm not sure what the problem is here.

Any help would be appreciated!

Upvotes: 5

Views: 1215

Answers (1)

tony19
tony19

Reputation: 138216

The files property is found on the inner <input> element of <paper-input>, which you could access with <paper-input>.inputElement.inputElement. So you would use this:

this.$.filepicker.inputElement.inputElement.files[0];

Note: In earlier versions of <paper-input>, the inner <input> was accessed with this.$.filepicker.inputElement, but it has since been refactored to have another container (hence, this.$.filepicker.inputElement.inputElement).

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    _handleFiles: function() {
      console.log(this.$.input.inputElement.inputElement.files[0]);
    }
  });
});
<head>
  <base href="https://polygit.org/polymer+1.10.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <paper-input type="file" id="input"></paper-input>
      <button on-tap="_handleFiles">Log file info</button>
    </template>
  </dom-module>
</body>

codepen

Upvotes: 6

Related Questions