Access file selected using paper input
I try to download the file selected using the Polymer <paper-input type="file" id="filepicker"> , but when I try to access the file with:
var file = this.$.filepicker.files I get the files is not defined error.
I did not find other ways to access files in paper inputs, so I'm not sure what the problem is.
Any help would be appreciated!
+5
1 answer
The files property is in the internal <input> <paper-input> element, which you can access with <paper-input>.inputElement.inputElement , so you should use this:
this.$.filepicker.inputElement.inputElement.files[0]; Note In earlier versions of <paper-input> , this.$.filepicker.inputElement was available to the internal <input> , but has since been reorganized to have a different 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> +6