glynthomas · February 17, 2014 17:54
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset=utf-8>
 <meta name="viewport" content="width=620">
 <title>HTML5 Demo: FileReader API thumbnail : canvas</title>
 <!-- <link rel="stylesheet" href="css/html5demos.css"> -->
 <body>
 <section id="wrapper">

    <header>
      <h1>HTML5 FileReader API thumbnail : canvas</h1>
    </header>

 <article>
  <p id="status">File API & FileReader API are supported</p>
  <p><input type=file></p>
  <p>Select an image from your machine to read the contents of the file without using a server</p>
  <canvas id="holder" width="100" height="100"></canvas>

 </article>

 <script>

  document.getElementsByTagName('input')[0].onchange = function (event) {
     event.preventDefault();

     var _up = { 'upload': '', 'holder': '', 'state': '', 'file':'', 'x':'', 'y':'', 'width':'', 'height':'', 'reader':'', 'img':'', 'err': ''};

     _up['upload'] = document.getElementsByTagName('input')[0];
     _up['state']  = document.getElementById('status');
     _up['file']   = document.getElementsByTagName('input')[0].files[0];
     _up['reader'] = new FileReader();
    
     switch (true) {
       
       case (typeof window.FileReader === 'undefined'):
             _up['state'].className = 'fail';
             return;
       case (!_up['upload'].files[0].type.match('image.*')):
             window.alert("Select image please");
             return;
       break;

     }

     _up['reader'].onload = function (event) {

         _up['holder'] = document.getElementById('holder').getContext('2d');
         _up['x'] = 0;
         _up['y'] = 0;
         _up['width'] = 100;
         _up['height'] = 100;
         _up['img'] = new Image();

         _up['holder'].save();
         _up['holder'].setTransform(1, 0, 0, 1, 0, 0);
         _up['holder'].clearRect(0, 0, holder.width, holder.height);
         _up['holder'].restore();

         _up['img'].src = event.target.result;

          switch (true) {

                // case (event.total > 30000000):
                case (event.total > 130000):
                      // console.log('your picture is larger than 3MB');
                      console.log('your picture is larger than 130k');
                      return;
                break;

                case (event.total == 48343):
                      console.log('you have 48k picture');
                break;

                case (event.total == 40766):
                      console.log('you have 40k picture');
                break;

        }

         // wait until the image has been fully processed
         _up['img'].onload = function() {
                    _up['holder'].drawImage(_up['img'], _up['x'], _up['y'], _up['width'], _up['height']);
         };
      
      };
  
     _up['reader'].onprogress = function(event) {
      
               // progressNode.max = event.total;
               // progressNode.value = event.loaded;
               // console.log(event.total);
     };
     
     _up['reader'].onloadend = function(event) {
          // var contents = event.target.result,

          // reader.onerror = function(event) {
          // console.error("File could not be read! Code " + event.target.error.code);
          // };

           _up['err'] = event.target.error;
 
           if (_up['err'] != null) {
             switch (_up['err'].code) {
               case read_error.ENCODING_ERR:
                     console.error("Encoding error!");
               break;

               case _up['err'].NOT_FOUND_ERR:
                     console.error("File not found!");
               break;

               case _up['err'].NOT_READABLE_ERR:
                     console.error("File could not be read!");
               break;

               case _up['err'].SECURITY_ERR:
                     console.error("Security issue with file!");
               break;

               default:
                     console.error("I have no idea what's wrong!");
             }
           } else {
              // progressNode.max = 1;
              // progressNode.value = 1;
              // console.log("Contents: " + contents);
              // console.log(progressNode);
              console.log('load end no errors found')
           }
     };
      
     _up['reader'].readAsDataURL(_up['file']);
     _up = [];
  
  return false;  

 };


 </script>

 <footer>
  <a id="built" href="http://twitter.com/glynfoo">@glynfoo</a>... we can re-build this</footer> 
 </section>


 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset=utf-8>
	<meta name="viewport" content="width=620">
	<title>HTML5 Demo: FileReader API thumbnail : canvas</title>
	<!-- <link rel="stylesheet" href="css/html5demos.css"> -->
	<body>
	<section id="wrapper">

	<header>
	<h1>HTML5 FileReader API thumbnail : canvas</h1>
	</header>

	<article>
	<p id="status">File API & FileReader API are supported</p>
	<p><input type=file></p>
	<p>Select an image from your machine to read the contents of the file without using a server</p>
	<canvas id="holder" width="100" height="100"></canvas>

	</article>

	<script>

	document.getElementsByTagName('input')[0].onchange = function (event) {
	event.preventDefault();

	var _up = { 'upload': '', 'holder': '', 'state': '', 'file':'', 'x':'', 'y':'', 'width':'', 'height':'', 'reader':'', 'img':'', 'err': ''};

	_up['upload'] = document.getElementsByTagName('input')[0];
	_up['state'] = document.getElementById('status');
	_up['file'] = document.getElementsByTagName('input')[0].files[0];
	_up['reader'] = new FileReader();

	switch (true) {

	case (typeof window.FileReader === 'undefined'):
	_up['state'].className = 'fail';
	return;
	case (!_up['upload'].files[0].type.match('image.*')):
	window.alert("Select image please");
	return;
	break;

	}

	_up['reader'].onload = function (event) {

	_up['holder'] = document.getElementById('holder').getContext('2d');
	_up['x'] = 0;
	_up['y'] = 0;
	_up['width'] = 100;
	_up['height'] = 100;
	_up['img'] = new Image();

	_up['holder'].save();
	_up['holder'].setTransform(1, 0, 0, 1, 0, 0);
	_up['holder'].clearRect(0, 0, holder.width, holder.height);
	_up['holder'].restore();

	_up['img'].src = event.target.result;

	switch (true) {

	// case (event.total > 30000000):
	case (event.total > 130000):
	// console.log('your picture is larger than 3MB');
	console.log('your picture is larger than 130k');
	return;
	break;

	case (event.total == 48343):
	console.log('you have 48k picture');
	break;

	case (event.total == 40766):
	console.log('you have 40k picture');
	break;

	}

	// wait until the image has been fully processed
	_up['img'].onload = function() {
	_up['holder'].drawImage(_up['img'], _up['x'], _up['y'], _up['width'], _up['height']);
	};

	};

	_up['reader'].onprogress = function(event) {

	// progressNode.max = event.total;
	// progressNode.value = event.loaded;
	// console.log(event.total);
	};

	_up['reader'].onloadend = function(event) {
	// var contents = event.target.result,

	// reader.onerror = function(event) {
	// console.error("File could not be read! Code " + event.target.error.code);
	// };

	_up['err'] = event.target.error;

	if (_up['err'] != null) {
	switch (_up['err'].code) {
	case read_error.ENCODING_ERR:
	console.error("Encoding error!");
	break;

	case _up['err'].NOT_FOUND_ERR:
	console.error("File not found!");
	break;

	case _up['err'].NOT_READABLE_ERR:
	console.error("File could not be read!");
	break;

	case _up['err'].SECURITY_ERR:
	console.error("Security issue with file!");
	break;

	default:
	console.error("I have no idea what's wrong!");
	}
	} else {
	// progressNode.max = 1;
	// progressNode.value = 1;
	// console.log("Contents: " + contents);
	// console.log(progressNode);
	console.log('load end no errors found')
	}
	};

	_up['reader'].readAsDataURL(_up['file']);
	_up = [];

	return false;

	};


	</script>

	<footer>
	<a id="built" href="http://twitter.com/glynfoo">@glynfoo</a>... we can re-build this</footer>
	</section>


	</body>
	</html>