A request body editor to add files as a payload.

Usage no npm install needed!

<script type="module">
  import advancedRestClientFilesPayloadEditor from 'https://cdn.skypack.dev/@advanced-rest-client/files-payload-editor';


Published on NPM

Build Status

Published on webcomponents.org


<files-payload-editor> A request body editor to add files as a payload. With this element the user can select single file that will be used in the request body.

The element can be used in forms when iron-form is used. It contains validation methods to validate user input.



npm install --save @advanced-rest-client/files-payload-editor

In an html file

    <script type="module">
      import '@advanced-rest-client/files-payload-editor/files-payload-editor.js';
      document.querySelector('files-payload-editor').onchange = (e) => {
        console.log(e.target.value); // or e.detail.value

In a LitElement template

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/files-payload-editor/files-payload-editor.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <files-payload-editor @value-changed="${this._fileChanged}"></files-payload-editor>

  _fileChanged(e) {
    this.body = e.detail.value;
customElements.define('sample-element', SampleElement);


git clone https://github.com/advanced-rest-client/files-payload-editor
cd files-payload-editor
npm install

Running the demo locally

npm start

Running the tests

npm test