file input

by Lazaro Contreras

HTML

<input type='file' accept='mca/plain' onchange='openFile(event)'><br>
<canvas id="can"></canvas>

CSS

.ux-a-file-upload {
  position: relative;
}

.ux-a-file-upload__input-file {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

JavaScript

var ctx = can.getContext('2d');


var openFile = function(event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          console.log(reader.result);
          new Uint8Array(reader.result).forEach((e, i)=>{
            new Uint8Array(e).forEach((el, j)=>{
            	let k = 0
              while(el[k] == 0 || k < 256){
              	k++
              }
          		var px = el[k];
							ctx.fillStyle = 'rgb(' + px + ',' + px + ',' + px + ')';
							ctx.fillRect(j * 2, i * 2, 2, 2);
          	})
          })
        };
        reader.readAsArrayBuffer(input.files[0]);
      };