Ace Editor Drag And Drop

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://techslides.com/demos/archive/js/zip.js"></script>
<script src="http://techslides.com/demos/archive/js/ZeroClipboard.min.js"></script>
<script src="http://techslides.com/demos/archive/js/ZeroClipboard.swf"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js"></script>
<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
<body>
<br>
    <div id="error"></div>
    <div id="sidebar">
        <div id="drag">
        <h3>Drop File Here</h3>
              <span><button class="btn btn-danger" onclick="saveTextAsFile()">Save Text to File</button></span>
              <span><button class="btn btn-primary" id="fbutton">Browse</button></span>

        </div>
        <input type="file" id="filesinput" multiple>
        <input type="file" id="directoryinput" multiple webkitdirectory>
        <input type="file" accept="application/zip" id="zipinput">
        <div id="output"></div>
    </div>
    <div id="main"> 
         <button class="btn btn-info js-textareacopybtn" id="copy" style="visibility:hidden;">Copy to Clipboard</button>
        <br>
        <div id="textarea"></div>
    </div>
</body>

CSS

#sidebar{float:left; width:500px;margin-right:30px;height:100%;}
            #main {height:100%;}
            #main #textarea {margin-top:20px;}
            #main button {float:left;margin-right:10px;display:none;}
            body {}
            ul {list-style:none;}
            #drag {width:480px; border: 2px solid black; text-align: center; margin: auto; font-size: 40px; display: inline-block;}
            #einput {width:350px;margin-right:10px;}
            #output table {width:500px;}

            #filesinput, #directoryinput, #zipinput {
                visibility: collapse;
                width: 0px;
            }
            #output img{
                border: 5px solid #333;
                margin-right: 2px;
            }
            #copy.zeroclipboard-is-active { background-color: #aaa; }

            #inputFileNameToSaveAs{
              width: 90%;
            }
    #textarea {
        height: 400px;
    }

JavaScript

//JSON to TABLE
//https://github.com/afshinm/Json-to-HTML-Table
function ConvertJsonToTable(parsedJson,tableId,tableClassName,linkText){var italic="<i>{0}</i>";var link=linkText?'<a href="{0}">'+linkText+"</a>":'<a href="{0}">{0}</a>';var idMarkup=tableId?' id="'+tableId+'"':"";var classMarkup=tableClassName?' class="'+tableClassName+'"':"";var tbl='<table border="1" cellpadding="1" cellspacing="1"'+idMarkup+classMarkup+">{0}{1}</table>";var th="<thead>{0}</thead>";var tb="<tbody>{0}</tbody>";var tr="<tr>{0}</tr>";var thRow="<th>{0}</th>";var tdRow="<td>{0}</td>";var thCon="";var tbCon="";var trCon="";if(parsedJson){var isStringArray=typeof parsedJson[0]=="string";var headers;if(isStringArray)thCon+=thRow.format("value");else{if(typeof parsedJson[0]=="object"){headers=array_keys(parsedJson[0]);for(i=0;i<headers.length;i++)thCon+=thRow.format(headers[i])}}th=th.format(tr.format(thCon));if(isStringArray){for(i=0;i<parsedJson.length;i++){tbCon+=tdRow.format(parsedJson[i]);trCon+=tr.format(tbCon);tbCon=""}}else{if(headers){var urlRegExp=new RegExp(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig);var javascriptRegExp=new RegExp(/(^javascript:[\s\S]*;$)/ig);for(i=0;i<parsedJson.length;i++){for(j=0;j<headers.length;j++){var value=parsedJson[i][headers[j]];var isUrl=urlRegExp.test(value)||javascriptRegExp.test(value);if(isUrl)tbCon+=tdRow.format(link.format(value));else{if(value){if(typeof value=="object"){tbCon+=tdRow.format(ConvertJsonToTable(eval(value.data),value.tableId,value.tableClassName,value.linkText))}else{tbCon+=tdRow.format(value)}}else{tbCon+=tdRow.format(italic.format(value).toUpperCase())}}}trCon+=tr.format(tbCon);tbCon=""}}}tb=tb.format(trCon);tbl=tbl.format(th,tb);return tbl}return null}function array_keys(e,t,n){var r=typeof t!=="undefined",i=[],s=!!n,o=true,u="";if(e&&typeof e==="object"&&e.change_key_case){return e.keys(t,n)}for(u in e){if(e.hasOwnProperty(u)){o=true;if(r){if(s&&e[u]!==t)o=false;else...