import data from user selected CSV file to HTML text input

Question

I want to import contact numbers from a user selected CSV file to HTML text input field.My CSV file store name and mobile numbers and I want to import all the mobile numbers into an HTML text input separated by space or ,

Possible duplicate of [How to read data From \*.CSV file using javascript?](https://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript) — Nivethi Mathan, Mar 06 '18 at 05:44
I don't think so. I want the user to select the file before reading it — Waeez, Mar 06 '18 at 05:59

score 0 · Answer 1 · answered Mar 06 '18 at 08:59

You can use Papa Parse to read data from your CSV file. Here's the running example.

var mob = [];
$("input[type=file]").change(function(){
 $("input[type=file]").parse({
  config: {
   delimiter: "", // auto-detect
   newline: "", // auto-detect
   quoteChar: '"',
   header: false,
   complete: function(results, file) {
    for(var i=0; i<results.data.length;i++){
     mob.push(results.data[i][1]); //modify this line as per the format of your CSV file
    }
    console.log(mob);
    $(".d").val(mob.toString());
   }
  }
 });
});

<!DOCTYPE html>
<html>
 <head>
  <title>Papa</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.7/papaparse.min.js"></script>
 </head>
 <body>
  <input type="file">
  <input type="text" class="d">  
 </body>
</html>

My CSV file stores data in the following format name,mobile so the position of the mobile number in the array will be [1]

import data from user selected CSV file to HTML text input

1 Answers1