@advanced-rest-client/file-dropdeprecated

File drop web component

Usage no npm install needed!

<script type="module">
  import advancedRestClientFileDrop from 'https://cdn.skypack.dev/@advanced-rest-client/file-drop';
</script>

README

Published on NPM

Build Status

Published on webcomponents.org

file-drop

A component that render file drop region.

Usage

Installation

npm install --save @advanced-rest-client/file-drop

In an html file

<html>
  <head>
    <script type="module">
      import './node_modules/@advanced-rest-client/file-drop/file-drop.js';
    </script>
  </head>
  <body>
    <file-drop></file-drop>
    <script>
    {
      document.querySelector('file-drop').onchange = (e) => {
        console.log(e.target.file);
      };
    }
    </script>
  </body>
</html>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/file-drop/file-drop.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <file-drop @change="${this._fileChange}"></file-drop>
    `;
  }

  _fileChange(e) {
    this.file = e.target.file;
  }
}
customElements.define('sample-element', SampleElement);

Development

git clone https://github.com/advanced-rest-client/file-drop
cd file-drop
npm install

Running the demo locally

npm start

Running the tests

polymer test