Load a card file


Hi guys I am testing this library so I can import cards into my database.

the HTML code to load is :slight_smile:

<!DOCTYPE html>
  function loadVCard() {
    var fileReader = new FileReader();

    fileReader.onloadend = function() {
      document.getElementById('input').innerText = fileReader.result;
      VCF.parse(fileReader.result, function(vc) {
        document.getElementById('output').innerText = JSON.stringify(vc);


<input type="file" id="upload">
<button onclick="loadVCard()">Load vCard</button>
<pre id="input"></pre>
<pre id="output"></pre>


and the code to read the file.

 VCF.parse(input, function(vcard) {
// this function is called with a VCard instance.
// If the input contains more than one vCard, it is called multiple times.
console.log("Formatted name", vcard.fn);
console.log("Names", JSON.stringify(vcard.n));

How do I add a load button to open the file then call VCF.parse once it has loaded.


Steve Warby


Use an Input control. One the options on it will be the input type - choose ‘file’.


I see that but nothing in the samples or docs to show the on loaded event I need.

Where will I find this ?


Steve Warby


Finally worked it out.

var filename;
function loadVCard() {
    var fileReader = new FileReader();
    fileReader.onloadend = function() {
    HTMLview1.innerText = fileReader.result;
    VCF.parse(fileReader.result, function(vc) {
    HTMLview2.innerText = JSON.stringify(vc);
    console.log('vc = '+ JSON.stringify(vc.tel));
        tel = [JSON.stringify(vc.tel)];
        console.log('tel = ' + tel[0].value);
        var arr = Object.values(vc);
        console.log('tel array = '+tel);
        for (i in tel){
            console.log('i in loop = ' + i+ '   ' + tel[i].value);



Input1.onchange=function(event, numFiles, label){
   // console.log(event);
    filename = Input1.files[0];//['name'];


As usual I am now struggling with parsing the data ( I’m dyslexic and worse when tired ).

I have tel = [JSON.stringify(vc.tel)];

which outputs to the console as

tel array = [{“type”:“voice”,“value”:“079264xxxx”}]

So I presume I now have an array correctly formatted.

But I get tel = undefined

and the loop gives me

i in loop = 0 undefined

What am I not understanding here


Steve Warby


Wouldn’t it be tel = rather than tel array = ?


That was it thanks.

Sometimes I can’t see the trees for the woods.


Steve Warby