read file vue

by femfoyou

HTML

<script src="https://coderexample.com/demo/reading-csv-file-using-javascript/js/papaparse.js"></script>
<form class="form-inline">
<div class="form-group">
  <label for="files">Upload a CSV formatted file:</label>
  <input type="file" id="files"  class="form-control" accept=".csv" required />
</div>
<div class="form-group">
 <button type="submit" id="submit" class="btn btn-primary">Submit</button>
 </div>
</form>
<div id="app"></div>

CSS

/* Default Demo Style */
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700);

/* HTML from Bootstrap */
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

body, html {
	padding: 0;
	margin: 0;
  	font-size: 100%;
  	-webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}


/* Main Style */
body {
	font-family: 'Roboto',Arial,sans-serif;
	color: #333;
}

a, a:visited {
	color: #888; 
	text-decoration: none;
}

a:hover, a:active {
	color: #333;
}

h1, h2, h3 {
	font-family: 'Roboto',Arial,sans-serif;

}

h1 { 
	font-size: 2.5em; 
	font-weight: bold; 
}

h2 { 
	font-size: 1.5em; 
	font-weight: 300; 
}

h3 { 
	font-size: 1.2em; 
	font-weight: 400; 
}

/* Header Style */
.container .header {
	margin: auto 60px;
	padding: 5px;
	text-align: center;
}
.header-related{
	margin: 0 auto;
	padding: 5px;
	text-align: center;
	color: #f4645f;
}
.container .header span {
	display: block;
	font-size: 60%;
	opacity: 0.8;
	padding-bottom: 0.6em;
}

/* To Navigation Style */
.nav-top {
	background: #363636;
	text-transform: uppercase;
	width: 100%;
	font-size: 0.65em;
	line-height: 2.6;
	height: 36px;
}

.nav-top a {
	padding: 0.41em 1em;
	letter-spacing: 0.1em;
	color: #fff;
	display: inline-block;
	font-weight:bold;
}

.nav-top a:hover {
	color: #f4645f;
}

.nav-social {
	float: left;
	padding: 0.6em 0.6em 0 0.6em;
}

.nav-social span {
	margin-right: 0.5em;
}

.nav-top span.right {
	float: right;
}

.nav-top span.right a {
	float: left;
	display: block;
}




.main  {
  margin:10px auto;
  width:100%;
  padding:10px 20px 30px;
  max-width: 980px;
  overflow: auto;
  text-align: center;
 /* min-height: 250px;*/
}
.main p {
  color: #000;
  text-align: left;
  font-size: 18px;
  line-height: 180%;
  font-weight: 100;
}

.main-related  {
  margin: 25px auto;
  padding:20px;
  max-width: 980px;
  width:70%;
  overflow: hidden;
  border:2px dashed #333;
...

JavaScript

function buildTable(results){
console.log(results);
	var markup = "<table class='table'>";
	var data = results.data;
	
	for(i=0;i<data.length;i++){
		markup+= "<tr>";
		var row = data[i];
		var cells = row.join(",").split(",");
		
		for(j=0;j<cells.length;j++){
			markup+= "<td>";
			markup+= cells[j];
			markup+= "</th>";
		}
		markup+= "</tr>";
	}
	markup+= "</table>";
	
	
	$("#app").html(markup);
}


$(document).ready(function(){
		$('#submit').on("click",function(e){
			e.preventDefault();
			if (!$('#files')[0].files.length){
				alert("Please choose at least one file to read the data.");
			}
		
			$('#files').parse({
				config: {
					delimiter: "auto",
					complete: buildTable,
				},
				before: function(file, inputElem)
				{
					//console.log("Parsing file...", file);
				},
				error: function(err, file)
				{
					console.log("ERROR:", err, file);
				},
				complete: function()
				{
					//console.log("Done with all files");
				}
			});
		});
});