Menu
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!
537
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
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
