Is a Polymer 3 web component that lets users select and upload files. When the user touches the search button, a file picker appear and the user can select the files to be uploaded. Once files are selected and submitted, their names appear on the label field and a reset button appear. The reset button lets the users clear the selection.
See: Demo.
npm install --save @fluidnext-polymer/paper-input-file
<html>
<head>
<script type="module" src="@fluidnext-polymer/paper-input-file/paper-input-file.js"></script>
<script type="module" src="@fluidnext-polymer/paper-input-file/icons/paper-input-file-icons.js"></script>
</head>
<body>
<paper-input-file label="Select file"></paper-input-file>
<paper-input-file label="Select files" multiple></paper-input-file>
<paper-input-file label="Select text files" multiple accept="text/plain"></paper-input-file>
</body>
</html>import {PolymerElement, html} from '@polymer/polymer';
import '@fluidnext-polymer/paper-input-file/paper-input-file';
import '@fluidnext-polymer/paper-input-file/icons/paper-input-file-icons.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<paper-input-file label="Select file"></paper-input-file>
`;
}
}
customElements.define('sample-element', SampleElement);Icons can be customized by importing a different iconset. For example, here is the iconset code imported in the Demo.
import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
const template = html`
<iron-iconset-svg name="paper-input-file" size="24">
<svg><defs>
<g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></g>
<g id="clear"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g>
</defs></svg>
</iron-iconset-svg>
`;
document.head.appendChild(template.content);If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
git clone https://github.com/fluidnext/paper-input-file
cd paper-input-file
npm install
npm install -g polymer-cli
npm install -g wct-istanbullOpen terminal in the project root folder and run the following command.
polymer serve --openOpen terminal in the project root folder and run the following command.
polymer testTo see tests details, open the generated "index.html" inside "coverage/lcov-report" folder.