A Pen by Captain Anonymous on CodePen.
Created
December 28, 2014 06:42
-
-
Save anonymous/46bc52a5b79a91749d79 to your computer and use it in GitHub Desktop.
myrjqv
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container-fluid"> | |
<div class="row"> | |
<div class="col-lg-8 col-sm-8 col-12"> | |
<form method="POST" action="."> | |
<h4>Upload Prospects</h4> | |
<div class="form-group"> | |
<span class="input-group-btn"> | |
<span class="btn btn-primary btn-file"> | |
Browse… <input type="file"> | |
</span> | |
</span> | |
<input type="text" class="form-control" readonly> | |
</div> | |
<span class="help-block"> | |
Upload one or more Prospect CSVs - Please limit only 25,000 entries at a time. | |
</span> | |
</form> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col-lg-12" style="color: #000;"> | |
<table id="csvupload" class="table table-striped table-bordered" cellspacing="0" width="100%"></table> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col-lg-12" style="color: #000;"> | |
<h3> JSON output </h3> | |
<textarea rows="4" cols="50" id="jsonout"> </textarea> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function(){ | |
function isDataTable ( nTable ) | |
{ | |
var settings = $.fn.dataTableSettings; | |
for ( var i=0, iLen=settings.length ; i<iLen ; i++ ) | |
{ | |
if ( settings[i].nTable == nTable ) | |
{ | |
return true; | |
} | |
} | |
return false; | |
} | |
$(document).on('change', '.btn-file :file', function() { | |
var input = $(this); | |
var filename = input.val().replace(/^.*\\/, ""); | |
var ext = this.value.match(/\.(.+)$/)[1]; | |
if(isDataTable($("#csvupload")[0])){ | |
$("#csvupload").empty(); | |
} | |
switch(ext){ | |
case 'csv': | |
var client_data = []; | |
var client_json = []; | |
var client_mdata = []; | |
label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); | |
input.trigger('fileselect', [label]); | |
input.parse({ | |
config: { | |
delimiter: ",", // auto-detect | |
newline: "", // auto-detect | |
header: true, | |
dynamicTyping: false, | |
preview: 0, | |
encoding: "", | |
worker: false, | |
comments: false, | |
step: function(results, handle){ | |
// collect row data from csv | |
client_data.push(results.data[0]); | |
}, | |
complete: function(results, file) { | |
if(results.errors){ | |
console.log("Results.Errors:", results.errors); | |
} | |
// compile data for datatables from csv | |
for(var j = 0; j < (client_data.length-1); j++){ | |
var temp_cl = {}; | |
for(var i = 0; i < results.meta.fields.length; i++){ | |
var entry = client_data[j][String(results.meta.fields[i])]; | |
if(String(entry).length != 0){ | |
temp_cl[results.meta.fields[i]] = entry; | |
}else{ | |
temp_cl[results.meta.fields[i]] = "<i>no data</i>"; | |
} | |
} | |
client_json.push(temp_cl); | |
} | |
for(var i = 0; i < results.meta.fields.length; i++){ | |
client_mdata.push({ | |
"mDataProp": String(results.meta.fields[i]), | |
"sTitle": String(results.meta.fields[i]), | |
"sTargets": [i], | |
"sType": "string" | |
}); | |
} | |
$('#csvupload').dataTable({ | |
destroy: true, | |
"aaData": client_json, | |
"aoColumns": client_mdata | |
}); | |
$("textarea#jsonout").text(JSON.stringify(client_json)); | |
}, | |
error: function(err, file){ | |
console.log("ERROR:", err, file); | |
}, | |
download: false, | |
skipEmptyLines: false | |
}, | |
error: function(err, file, inputElem, reason){ | |
console.log(err, file, inputElem, reason); | |
}, | |
complete: function(results){ | |
bootbox.alert("Please check table and click submit if correct"); | |
} | |
}); | |
break; | |
default: | |
bootbox.alert("Non-CSV files not allowed [File not allowed: " + filename + "]"); | |
this.value = ''; | |
} | |
}); | |
$('.btn-file :file').on('fileselect', function(event, label) { | |
var input = $(this).parents('.form-group').find(':text'); | |
if( input.length ) { | |
input.val(label); | |
} else { | |
if(log){ alert(label); } | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.btn-file { | |
position: relative; | |
overflow: hidden; | |
} | |
.btn-file input[type=file] { | |
position: absolute; | |
top: 0; | |
right: 0; | |
min-width: 100%; | |
min-height: 100%; | |
font-size: 100px; | |
text-align: right; | |
filter: alpha(opacity=0); | |
opacity: 0; | |
background: red; | |
cursor: inherit; | |
display: block; | |
} | |
input[readonly] { | |
background-color: white !important; | |
cursor: text !important; | |
position: absolute; | |
top: 39px; | |
left: 102px; | |
} | |
#csvupload_wrapper > div.row > div.col-sm-12 { overflow: auto;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment