JSFiddle - React, Tailwind, and code Playground

by Evgenii Malikov

HTML

<div id="dropZone">Тащим негруппированный json сюда</div>
<textarea>Здесь будут результаты обработки</textarea>

CSS

#dropZone{width: 100%; height: 120px; background-color: #d9edf7; border: 2px dotted #999; text-align: center;}
#dropZone.hover{border: 2px dashed #090}
html,body,textarea{width:100%;height:100%}
body{overflow:hidden}

JavaScript

function groupJSON(text){
var boilersJson = {};
var boilers=JSON.parse(text);
console.log(boilers);

    $.each(boilers, function (key, value) {

    if (typeof (boilersJson[value.Make]) == 'undefined') boilersJson[value.Make] = [];

    boilersJson[value.Make].push(value.Model);
});
console.log(boilersJson);
boilersJsonText = JSON.stringify(boilersJson,null,'\t');

$('textarea').text(boilersJsonText,false,' ');

}



function dndUploadReady(){
    var $dropZone=$('#dropZone');
    var maxFileSizeKb=100;
    $dropZone[0].ondragover = function() {
        $dropZone.addClass('hover');
        return false;
    };
        
    $dropZone[0].ondragleave = function() {
        $dropZone.removeClass('hover');
        return false;
    };

    //prevent from dropping outside dropZone
    window.addEventListener("dragover",function(e){
      e = e || event;
      e.preventDefault();
    },false);
    window.addEventListener("drop",function(e){
      e = e || event;
      e.preventDefault();
    },false);

    $dropZone[0].ondrop = function(event) {
        event.preventDefault();
        var file=event.dataTransfer.files[0];
        var ext = file.name.split('.').pop();
        $dropZone.removeClass('hover');
        reader = new FileReader();
        reader.onload = function(e) {
          var text = reader.result;
 //         console.log(text);
          groupJSON(text);
        }
        reader.readAsText(file);
};
}

dndUploadReady();