Multifunctional File Reader: Handle file upload and drag and drop events

Recommend this page to a friend!
     
  Info   Example   Demos   Screenshots   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 161 All time: 318 This week: 14Up
Version License JavaScript version Categories
multifunctional 1.0MIT/X Consortium ...3.0Events, Files and Folders
Description 

Author

Andras Toth

This object can handle file upload and drag and drop events.

It can handle events of clicking or dragging and dropping files oh given page elements.

Then handler can either let the user pick files when the user clicks on the elements or process files when the user drops files in the page elements.

A given callback function is with the processed file data either as text or data URL.

Files that do not match given file name extensions may be ignored.

Innovation Award
JavaScript Programming Innovation award nominee
July 2015
Number 4

Prize: One year server license IP to country, region, city, latitude, longitude, ZIP code, time zone, area code database		 Nowadays browsers can let the users pick local files using form inputs or drag and drop events.

This object allows applications to process selected or dropped files on the browser side, thus without relying on a server to perform some useful action with the files.

Manuel Lemos
Picture of Andras Toth
  Performance   Level  
Name: Andras Toth <contact>
Classes: 22 packages by
Country: Hungary Hungary
Age: 51
All time rank: 31 in Hungary Hungary
Week rank: 1 Up

Level 4 StarStarStarStar

 Innovation award
Innovation award
Nominee: 15x

Winner: 9x

Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="Tóth András">
        <title>MultifunctionalFileReader</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css" media="screen">
        .img-holder{margin:5px;padding-top:15px;cursor:pointer;border:2px solid #9400d3;min-height:150px;border-radius:4px}.thumbnail a>img,.thumbnail>img{height:150px;margin-right:auto;margin-left:auto}h4{overflow:hidden}
        textarea{min-height:150px;overflow:auto;width:100%}.well{min-height:20px;padding:5px}.container{text-align:center}pre{background:#2d2d2d;border:0}body{padding-bottom:50px}
        </style>
    </head>
    <body>
 <div class="container">
    <div class="page-header text-center">
        <h1>HTML5 Multifunctional File Reader<br>
            <small>Download from:
                <a href="http://www.jsclasses.org/package/437-JavaScript-Multifunctional-File-Reader.html" target="_blank"> JSclasses </a>
            </small>
        </h1>
    </div>
    <h2 class="text-center">Click to select or Drop files to darkviolet bordered fields (jpg|png|svg)</h2>
    <div  class="row img-holder" style="border-style: dashed;"></div>
    <div  class="row img-holder" style="border-style: dashed;"></div>
    <h2 class="text-center">Drop files to gray bordered field (txt|html|css|js)</h2>
    <textarea class="row text-holder" style="border:2px;border-style: dashed;"></textarea>
    <h2 class="text-center">Required HTML and javascript example</h2>
<div style="background: #272822; text-align:left;width:auto;padding:.2em .6em;">
<pre style="margin: 0; line-height: 125%"><span style="color: #f92672">&lt;div</span>  <span style="color: #a6e22e">class=</span><span style="color: #e6db74">&quot;row img-holder&quot;</span> <span style="color: #a6e22e">style=</span><span style="color: #e6db74">&quot;border-style: dashed;&quot;</span><span style="color: #f92672">&gt;&lt;/div&gt;</span>
<span style="color: #f92672">&lt;div</span>  <span style="color: #a6e22e">class=</span><span style="color: #e6db74">&quot;row img-holder&quot;</span> <span style="color: #a6e22e">style=</span><span style="color: #e6db74">&quot;border-style: dashed;&quot;</span><span style="color: #f92672">&gt;&lt;/div&gt;</span>
<span style="color: #f92672">&lt;textarea</span> <span style="color: #a6e22e">class=</span><span style="color: #e6db74">&quot;row text-holder&quot;</span> <span style="color: #a6e22e">style=</span><span style="color: #e6db74">&quot;border:2px;border-style: dashed;&quot;</span><span style="color: #f92672">&gt;&lt;/textarea&gt;</span>

<span style="color: #f92672">&lt;script </span><span style="color: #a6e22e">type=</span><span style="color: #e6db74">&quot;text/javascript&quot;</span> <span style="color: #a6e22e">src=</span><span style="color: #e6db74">&quot;multifunctionalfilereader.js&quot;</span><span style="color: #f92672">&gt;&lt;/script&gt;</span>
<span style="color: #f92672">&lt;script </span><span style="color: #a6e22e">type=</span><span style="color: #e6db74">&quot;text/javascript&quot;</span><span style="color: #f92672">&gt;</span>
    <span style="color: #66d9ef">function</span> <span style="color: #a6e22e">pickImage</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">e</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
        <span style="color: #66d9ef">var</span> <span style="color: #a6e22e">div</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">document.</span><span style="color: #a6e22e">createElement</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;div&#39;</span><span style="color: #f8f8f2">);</span>
        <span style="color: #66d9ef">var</span> <span style="color: #a6e22e">str</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&#39;&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;  &lt;div class=&quot;thumbnail&quot;&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;    &lt;img src=&quot;&#39;</span> <span style="color: #f92672">+</span> <span style="color: #a6e22e">e</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">data</span> <span style="color: #f92672">+</span> <span style="color: #e6db74">&#39;&quot; alt=&quot;...&quot;&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;    &lt;div class=&quot;caption&quot;&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;      &lt;h4&gt;&#39;</span> <span style="color: #f92672">+</span> <span style="color: #a6e22e">e</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">name</span> <span style="color: #f92672">+</span> <span style="color: #e6db74">&#39;&lt;/h4&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;      &lt;p&gt;size: &#39;</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">(</span><span style="color: #a6e22e">e</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">size</span> <span style="color: #f92672">/</span> <span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">).</span><span style="color: #a6e22e">toString</span><span style="color: #f8f8f2">()</span> <span style="color: #f92672">+</span> <span style="color: #e6db74">&#39; kilobyte&lt;/p&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;    &lt;/div&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;  &lt;/div&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;&lt;/div&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">div</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">innerHTML</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">str</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">target</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">appendChild</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">div</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">children</span><span style="color: #f8f8f2">[</span><span style="color: #ae81ff">0</span><span style="color: #f8f8f2">]);</span>
    <span style="color: #f8f8f2">}</span>
    <span style="color: #66d9ef">var</span> <span style="color: #a6e22e">reader</span> <span style="color: #f92672">=</span> 
    <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">MultiFunctionalFileReader</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;.img-holder&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">[</span><span style="color: #e6db74">&#39;click&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;drop&#39;</span><span style="color: #f8f8f2">]).</span><span style="color: #a6e22e">Init</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;jpg|png|svg&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;dataURL&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">pickImage</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">);</span>
    <span style="color: #66d9ef">var</span> <span style="color: #a6e22e">reader2</span> <span style="color: #f92672">=</span> 
    <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">MultiFunctionalFileReader</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;.text-holder&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">[</span><span style="color: #e6db74">&#39;drop&#39;</span><span style="color: #f8f8f2">]).</span><span style="color: #a6e22e">Init</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;txt|html|css|js&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;text&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">function</span> <span style="color: #f8f8f2">(</span><span style="color: #a6e22e">result</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
        <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">target</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">value</span> <span style="color: #f92672">+=</span> <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">data</span><span style="color: #f8f8f2">;</span>
    <span style="color: #f8f8f2">},</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">);</span>
    <span style="color: #75715e">/*------------------------------------------ Example initialization ------------------------------------------*/</span>
    <span style="color: #a6e22e">reader</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">MultiFunctionalFileReader</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;elements&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;events array&#39;</span><span style="color: #f8f8f2">);</span>
    <span style="color: #a6e22e">reader</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">Init</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;file types&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;read as&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;callabck function&#39;</span><span style="color: #f8f8f2">);</span>
    <span style="color: #a6e22e">reader</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">Destroy</span><span style="color: #f8f8f2">();</span>                                           <span style="color: #75715e">// remove events</span>
    <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">MultiFunctionalFileReader</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;.img-holder&#39;</span><span style="color: #f8f8f2">,</span>                <span style="color: #75715e">// query selector or elements</span>
        <span style="color: #f8f8f2">[</span><span style="color: #e6db74">&#39;click&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;drop&#39;</span><span style="color: #f8f8f2">]</span>                                       <span style="color: #75715e">// events array   </span>
    <span style="color: #f8f8f2">).</span><span style="color: #a6e22e">Init</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;jpg|png|svg&#39;</span><span style="color: #f8f8f2">,</span>                                       <span style="color: #75715e">// pipe separated file types</span>
        <span style="color: #e6db74">&#39;dataURL&#39;</span><span style="color: #f8f8f2">,</span>                                              <span style="color: #75715e">// read as dataURL, binary, array, (default) -&gt; text</span>
        <span style="color: #66d9ef">function</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">result</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>                                      <span style="color: #75715e">// callback function</span>
                <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">target</span><span style="color: #f8f8f2">,</span>                                  <span style="color: #75715e">// target element</span>
                <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">data</span><span style="color: #f8f8f2">,</span>                                    <span style="color: #75715e">// data</span>
                <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">name</span><span style="color: #f8f8f2">,</span>                                    <span style="color: #75715e">// file name</span>
                <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">size</span>                                     <span style="color: #75715e">// file size</span>
        <span style="color: #f8f8f2">},</span> <span style="color: #66d9ef">true</span>                                                 <span style="color: #75715e">// boolean multiselect</span>
    <span style="color: #f8f8f2">);</span>
<span style="color: #f92672">&lt;/script&gt;</span>
</pre></div>
    </div>
    <script type="text/javascript" src="multifunctionalfilereader.js"></script>
    <script type="text/javascript">
        function pickImage(result) {
            var div = document.createElement('div');
            var str = '<div class="col-sm-6 col-md-4">';
            str += '  <div class="thumbnail">';
            str += '    <img src="' + result.data + '" alt="...">';
            str += '    <div class="caption">';
            str += '      <h4>' + result.name + '</h4>';
            str += '      <p>size: ' + (result.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);
    </script>
    </body>
</html>

  demoExternal page  
Screenshots (1)  
  • Capture.png
  Files folder image Files (3)  
File Role Description
Accessible without login Plain text file index.html Example example
Plain text file multifunctionalfilereader.js Class class

Downloadmultifunctional-2015-07-05.zip 129KB
Downloadmultifunctional-2015-07-05.tar.gz 130KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:161
This week:0
All time:318
This week:14Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.