HTML5 Multifunctional File Reader
Switch branches/tags
Nothing to show
Clone or download
Latest commit d9f9688 Jul 6, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitattributes 🍭 Added .gitattributes & .gitignore files Jul 6, 2015
.gitignore
AUTHORS.txt v 1.0.0 Jul 6, 2015
MIT-License.txt v 1.0.0 Jul 6, 2015
README.md
icon.png v 1.0.0 Jul 6, 2015
index.html
multifunctionalfilereader.js v 1.0.0 Jul 6, 2015

README.md

MultiFunctionalFileReader

javascript HTML5 file reader with some options.

- You can use file reader with multiple events
- You can use file reader on multiple html elements
- You can define acceptable file types
- After using you can remove events  
- Callback function

Version

1.0.0

- You can use file reader with multiple events
- You can use file reader on multiple html elements
- You can define acceptable file types
- After using you can remove events  
- Callback function

Required HTML & 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>

License

MIT

Author: Tóth András

http://atandrastoth.co.uk/

2015-07-06