JSFiddle - React, Tailwind, and code Playground

by kazu69

HTML

<div class="input-content">
<input type="file" accept="image/png, image/jpeg" capture="camera">
<img src="" width="40" height="30" alt="Image preview...">
mime: <span id="mime-type"></span><br>
<button>clear</button>
<br>
<input type="text" placeholder="入力項目"  />
</div>

CSS

html, body {
  height: 99%;
  margin: 0;
}

.space {
  background-color: #ddf;
}

.input-content {
  margin: 20px 0;
}

JavaScript

document.querySelector('input[type=file]').addEventListener('change', previewFile, false)

document.querySelector('button').addEventListener('click', removeFile, false)

function removeFile() {
var preview = document.querySelector('img');
if (preview.src != '') {
 preview.src = "";
clear();
}
}

function clear() {
	var input = document.querySelector('input[type=file]');
  input.value = '';
}

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();
  var mime = document.querySelector('#mime-type');

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
 		mime.innerHTML = file.type;
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}