JSFiddle - React, Tailwind, and code Playground

by mrleroylee

HTML

<input type="file" id="myfile" name="myfile" accept="image/*;capture=camera"/>

<canvas id="c"></canvas>

<script>
function handleFileSelect(evt) {
    var file = evt.target.files[0];
    console.log(file);
    // FileList object

    // Only process image files.
    if (file.type.match('image.*')) {
        console.log('true');
        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(file) {
            return function(e) {
                // Render thumbnail.
                var canvas = new fabric.Canvas('c', {
		isDrawingMode: true
	});
    var image = document.createElement('img');
    image.src = e.target.result;
    canvas.setWidth('500');
    canvas.setHeight(image.height);
    canvas.setBackgroundImage(e.target.result, canvas.renderAll.bind(canvas));
    //canvas.freeDrawingBrush.width = drawingLineWidth.value;
    //canvas.freeDrawingBrush.color = drawingColor.value;
                
            };
        })(file);

        // Read in the image file as a data URL.
        reader.readAsDataURL(file);
    }
}

document.getElementById('myfile').addEventListener('change', handleFileSelect, false);
</script>