Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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

About

HTML5 Multifunctional File Reader

Resources

License

Releases

No releases published

Packages

No packages published