be-literate (📖)

Enhance the input element so it can declaratively read contents from a local file (or files).

be-literate turns this code snippet into an attribute-based HTML Enhancement / Decorator / Behavior / Directive / Custom Attribute.

Syntax:

<input type=file be-literate>

It causes the input element to emit event "enh-by-be-literate.file-contents-changed", and the contents are provided in the custom event's detail.value property.

The file contents can be read via path: inputEl.beEnhanced.beLiterate.fileContents.

Specifying Read Option

To specify which of the file read options to apply to the file(s), set the attribute:

<input type=file be-literate=readAsDataURL>

If not specified, as above, the default is readAsText.

Running locally

Any web server than can serve static files will do, but...

1. Install git.
2. Do a git clone or a git fork of repository https://github.com/bahrus/be-literate
3. Install node.js
4. Open command window to folder where you cloned this repo.

5. npm install

6. npm run serve

7. Open http://localhost:3030/demo/dev in a modern browser.

Using from ESM Module:

import 'be-literate/be-literate.js';

Using from CDN:

<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-literate';
</script>