JSFiddle - React, Tailwind, and code Playground
HTML
<form method="post" enctype="multipart/form-data" id="test">
<input type="file" name="file" accept="image/*"><br />
<select name="format">
<option value="0">Binary String</option>
<option value="1" selected>DataURL (Base64)</option>
<option value="2">Text</option>
</select><br />
<input type="submit">
</form>
<textarea id="fileData" cols="100" rows="20"></textarea>
JavaScript
var form = $('#test');
form.on('submit', function(e) {
e.preventDefault();
var formData = new FormData(form[0]);
var reader = new FileReader();
var format = formData.get('format');
var file = formData.get('file');
switch (format) {
case "0":
reader.readAsBinaryString(file);
break;
case "1":
reader.readAsDataURL(file);
break;
case "2":
reader.readAsText(file);
break;
default:
reader.readAsDataURL(file);
break;
}
reader.onloadend = function(e){
document.getElementById("fileData").innerHTML = e.target.result;
}
});