Click to select or Drop files to darkviolet bordered fields (jpg|png|svg)
Drop files to gray bordered field (txt|html|css|js)
Required HTML and javascript example
<div class="row img-holder" style="border-style: dashed;"></div>
<div class="row img-holder" style="border-style: dashed;"></div>
<textarea class="row text-holder" style="border:2px;border-style: dashed;"></textarea>
<script type="text/javascript" src="multifunctionalfilereader.js"></script>
<script type="text/javascript">
function pickImage(e) {
var div = document.createElement('div');
var str = '<div class="col-sm-6 col-md-4">';
str += ' <div class="thumbnail">';
str += ' <img src="' + e.data + '" alt="...">';
str += ' <div class="caption">';
str += ' <h4>' + e.name + '</h4>';
str += ' <p>size: ' + (e.size / 1000).toString() + ' kilobyte</p>';
str += ' </div>';
str += ' </div>';
str += '</div>';
div.innerHTML = str;
result.target.appendChild(div.children[0]);
}
var reader =
new MultiFunctionalFileReader('.img-holder', ['click', 'drop']).Init('jpg|png|svg', 'dataURL', pickImage, true);
var reader2 =
new MultiFunctionalFileReader('.text-holder', ['drop']).Init('txt|html|css|js', 'text', function (result) {
result.target.value += result.data;
}, true);
/*------------------------------------------ Example initialization ------------------------------------------*/
reader = new MultiFunctionalFileReader('elements', 'events array');
reader.Init('file types', 'read as', 'callabck function');
reader.Destroy(); // remove events
new MultiFunctionalFileReader('.img-holder', // query selector or elements
['click', 'drop'] // events array
).Init('jpg|png|svg', // pipe separated file types
'dataURL', // read as dataURL, binary, array, (default) -> text
function(result) { // callback function
result.target, // target element
result.data, // data
result.name, // file name
result.size // file size
}, true // boolean multiselect
);
</script>
