The module includes 3 binder creators which allow to easily deal with files.
In browser environment (or whatever environment where
Matreshka is global variable) these functions extend
const file dropFiles dragOver = Matreshkabinders;// ...this;// if you don't want to create variablesthis;
The bundle can be downloaded at gh-pages branch
In CJS environment
Matreshka.binders is not extended.
npm install --save matreshka-binders-file
// import all bindersconst file dropFiles dragOver = ;// import only needed bindersconst file = ;const dropFiles = ;const dragOver = ;// ...this;
Returns a binder for file input. The binder allows not only to get basic data about a file, but also to read it without calling
readAs argument isn’t set, input value gets into the bound property after its changing (on "change" DOM event). If
readAs is set, binder will read the file and transform it into the needed format (data URI, Blob...) and only after reading the file, the property will be changed.
The file (native
File) or an array of files becomes the final value of the property in the presence of
multiple attribute. At the same time the result of reading will get into the object of every file as
readAs [optional] (string) - the argument value can be "arrayBufer", "binaryString", "dataURL", "text". The value depends on the presence of corresponding methods of the
this;// ... user changes input content// choosing my-image.png from file system ...this;
Returns a binder which allows to drop files from a file manager to given element. After
bindNode is called HTML block gets needed DOM event listeners (eg, "dragover" and "drop"). When user drops files from file manager into the block, the property gets an array of dropped files as its value. As like
file the binder accepts one optional argument called
readAs which says how the files need to be read by
FileReader: data URI, Blob... (the result of reading is placed in
readerResult property of every file). If
readAs isn't given, the property gets an array of files which wasn't read.
readAs [optional] (string) - the argument value can be
"text". The value depends on the presence of corresponding methods of the
this;// ... user drops one file called// "my-image.png" into .drop-area blockthis;
Makes given property equal to
true when something is dragged over given node.
Add dragovered class name when file (or another draggable object) is dragged over .my-node