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>