JSFiddle - React, Tailwind, and code Playground

by Naeel Maqsudov

HTML

<p>qwerqwerqwerqwerqwerqwerqwerqkwj hrkqjeh rkq wherkqh wekrj hqwkejr hqkwj herqkwj her</p>
<button class="gdwhFileLoader" title="Загрузка файла (csv/xls/xlsx) или выделенного диапазона Excel">Импорт данных</button>
<div class="gdwhFileLoader" style="display:none">
  <label>Для загрузки данных<ul><li>Перетащите в это окно файл или выделенный диапазон Excel мышкой</li><li>или выберите файл с помощью кнопки:<br><input type="file"></li><li>или скопируйте файл или диапазон Excel, а затем</li></ul>     
  </label>
  <div contenteditable="true">вставьте в это поле (нажмите Ctrl+V здесь)</div>
</div>
<p>sdfaksdfkasjhdfkajshdfkahdfkashdf</p>

CSS

div.gdwhFileLoader {
  border: 2px solid #000;
  //position: absolute;
  //left: 90%;
}
div.gdwhFileLoader>div {
  border: 2px solid #000;
}
div.gdwhFileLoader.candrop{
  background-color: #eee;
}

JavaScript

$("button.gdwhFileLoader")
.click(function(){
  var d = $("div.gdwhFileLoader").dialog({});
  d.dialog("open");
});
$("div.gdwhFileLoader input")
.change(function(e){
   var dataF = e.target.files;
   console.log('paste',dataF);
   alert('CHOOSE:'+dataF[0].name);  
});

$("div.gdwhFileLoader>div")
.keypress(function(e){if(!(e.ctrlKey && (e.key==='v'||e.key==='м'||e.key==='V'||e.key==='М'))) e.preventDefault()})
.keydown(function(e){if(e.keyCode!==86) e.preventDefault();})
.keyup(function(e){if(e.keyCode!==86) e.preventDefault();})

$(document)
.delegate("div.gdwhFileLoader>div","paste",function(e){
   e.stopPropagation(); 
   e.preventDefault(); 
   var cd = e.originalEvent.clipboardData||window.clipboardData;
   var data = cd.getData('Text');
   var dataF = cd.files;
   if(data==''){
     console.log('paste',dataF);
     alert('PASTE:'+dataF[0].name);
   }else{
     console.log('paste',data);
     alert('PASTE:'+data);
   }
})
.delegate("div.gdwhFileLoader","drop",function(e){ //if(e.target.id)
  $("div.gdwhFileLoader").removeClass("candrop")
  var data = e.originalEvent.dataTransfer.getData('Text');   //console.log("DROP",data);
  var dataF = e.originalEvent.dataTransfer.files;
  e.preventDefault(e.originalEvent);
  if(data==''){
    console.log('paste',dataF);
    alert('DROP:'+dataF[0].name);
  }else{
    console.log('paste',data);
    alert('DROP:'+data);
  }
})
.delegate("div.gdwhFileLoader","dragleave", function(e){
  $("div.gdwhFileLoader").removeClass("candrop")
  return false;
})
.delegate("div.gdwhFileLoader","dragover", function(e){
  $("div.gdwhFileLoader").addClass("candrop")
  e.preventDefault();
  return false;
})