JarCasting
An element that computes number of bytes in String, ArrayBuffer, Blob (and therefore File) and - in supported browsers - from FormData.
Note that Safari is excluded from FormData tests because there's some bug in WebKit implementation of the Request object and it doesn't read FormData properly. Chrome had similar bug but they fixed it already. See demo page to check if your browser support FormData.
This element is native web component without using any library. Do not set attributes as this element do not observe changes to any. Use templating system of your choice to set a property on the element or use it imperatively.
Example
In a Polymer template
<textarea value="{{value::input}}"></textarea>
<bytes-counter value="[[value]]" bytes="{{bytes}}"></bytes-counter>
In a LitElement template
import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/bytes-counter/bytes-counter.js';
class SampleElement extends LitElement {
render() {
return html`
<textarea @input="${this._inputHandler}"></textarea>
<bytes-counter .value="${this.value}" @change="${this._computeHandler}"></bytes-counter>
`;
}
_inputHandler(e) {
const { value } = e.target;
this.value = value;
}
_computeHandler(e) {
const { value } = e.detail;
console.log(`Computed input size is ${value} bytes`);
}
}
customElements.define('sample-element', SampleElement);
Imperative use
<textarea id="i1"></textarea>
<bytes-counter id="b1"></bytes-counter>
<output id="o1"></output>
<script>
{
document.getElementById('i1').addEventListener('input', (e) => {
const { value } = e.target;
document.getElementById('b1').value = value;
});
document.getElementById('b1').addEventListener('bytes-changed', (e) => {
const { value } = e.detail;
document.getElementById('o1').value = `Current input has ${value} bytes`;
});
}
</script>
Note that computations are asynchronous and there is a delay between setting the value property and getting a result.
New in version 3
- Dropped support for Polymer library. It is not plain web component.
- Added
aria-hiddenattribute - Added debouncer when setting the
value - Deprecating
bytes-changedevent. Usechangeevent instead. This event is kept for compatibility with Polymer.
Development
git clone https://github.com/@advanced-rest-client/bytes-counter
cd bytes-counter
npm install
Running the demo locally
npm start
Running the tests
npm test
