ampersand-filereader-input-view

A view module for returning metadata via callback using browser FileReader. Works well with ampersand-form-view.

It does the following:

• Returns an object via callback prop/method with metadata for file selected.

install

npm install ampersand-filereader-input-view

example

The only required attributes are name and type. Everything else is optional (even the callback.)

1var InputView = require('ampersand-filereader-input-view');
2
3
4var field = new FileReaderInputView({
5    // form input's `name` attribute
6    name: 'file',
7    // You can replace the built-in template for the parent item
8    // just give it an html string. Make sure it has a single "root" element that contains:
9    //  - an element with a `data-hook="label"` attribute
10    //  - an element with a `data-hook="fieldContainer"` this is where individual fields go
11    //  - an element with a `data-hook="main-message-container"` attribute (this we'll show/hide)
12    //  - an elememt with a `data-hook="main-message-text"` attribute (where message text goes for error)
13    template: // some HTML string,
14    // Template for individual view. It should be a string of HTML
15    // Make sure it has a single "root" element that contains
16    //  - an element with a `data-hook="label"` attribute
17    //  - an element with a `data-hook="message-container"` attribute (this we'll show/hide)
18    //  - an elememt with a `data-hook="message-text"` attribute (where message text goes for error)
19    // function called when file selected
20    //  - arguments returned by callback:
21    //    * 1st: fileInputView - view object of the file form-field
22    //    * 2nd: data - object containing metadata for file selected
23    callback: function (fileInputView, data) {}
24    // Label name
25    label: 'File',
26    // Optional placeholder attribute
27    placeholder: 'file',
28    // optional, this is the element that will be
29    // replaced by this view. If you don't
30    // give it one, it will create one.
31    el: document.getElementByID('field'),
32    // class to set on input when input is valid
33    validClass: 'input-valid', // <- that's the default
34    // type value to use for the input tag's type value
35    type: 'file',
36    // class to set on input when input is valid
37    invalidClass: 'input-invalid', // <- that's the default
38    // Message to use if error is that it's required
39    // but no value was set.
40    requiredMessage: 'This field is required.',
41    // optional, you can pass in the parent view explicitly
42    parent:  someViewInstance
43});
44
45// append it somewhere or use it in side an ampersand-form-view
46document.querySelector('form').appendChild(field.el);
47

browser support

credits

Created by @gdibble.

license

MIT

---

» npmjs.com/package/ampersand-filereader-input-view