Load a card file

1

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>

<script>
  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);
      });
    };

    fileReader.readAsText(document.getElementById('upload').files[0]);
  }
</script>

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

</body>

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.

Cheers

Steve Warby

2

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

3

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

Where will I find this ?

Cheers

Steve Warby

4

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);

        }
      });
    };

    fileReader.readAsText(filename);
  }



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

    loadVCard()
 }

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

Cheers

Steve Warby

5

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

6

That was it thanks.

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

Cheers

Steve Warby