JSFiddle - React, Tailwind, and code Playground

by nju33

HTML

<script src="https://unpkg.com/[email protected]/encoding.js"></script>
<pre style="font-size:6px">
abcdefghijklmnopqrstuvwxyz,
ABCDEFGHIJKLMNOPQRSTUVWXYZ,
1234567890-,
`~+_=\][{}":;''"]/?.,<>!@#$%^&*(),
あいうえおかき砂糖
緑箱猫盛犬寺大仏那覇
</pre>

<div id="dd">
DnD
</div>

<pre id="result">
</pre>

CSS

#dd {
  background: gray;
  width: 10em;
  height: 5em;
}

Babel + JSX

if (window.File && window.FileReader && window.FileList && window.Blob) {



const dd = document.getElementById('dd');

dd.addEventListener('dragover', ev => {
  ev.preventDefault();
});
dd.addEventListener('drop', ev => {
  const files = Array.from(ev.dataTransfer.files)
  const result = files.every(file => {
    return file.type === 'text/csv'
  });
  
  if (!result) {
   throw new Error('be not csv')
  }
  
  files.map(file => {
    const fileReader = new FileReader();
    fileReader.addEventListener('load', ev => {
      const chars = ev.target.result.split('').map(char => char.charCodeAt());
      document.getElementById('result')
      	.innerHTML = Encoding.convert(chars, {
 						to: 'UNICODE',
     				from: 'UTF8',
  					type: 'string'
				});
    })
    fileReader.readAsBinaryString(file);
  });
});


}