XMPP File Transfer via JavaScript Strophe.js in Openfire

Question

I am trying to get Strophe.js based XMPP file transfer to work. I can get logged in to work on my openfire server. I can send messages and receive messages fine but I am having trouble with file transfer.

HTML:

  <form name='file_form' class="panel-body">
    <input type="file" id="file" name="file[]" />
    <input type='button' id='btnSendFile' value='sendFile' />
    <output id="list"></output>
  </form>

Javascript file:

// file
var sid = null;
var chunksize;
var data; 
var file = null;
var aFileParts, mimeFile, fileName;


function sendFileClick() {
file =$("#file")[0].files[0];
sendFile(file);

readAll(file, function(data) {
    log("handleFileSelect:");
    log("   >data="+data);
    log("   >data.len="+data.length);
});
}

function sendFile(file) {
var to = $('#to').get(0).value;
var filename = file.name;
var filesize = file.size;
var mime = file.type;
chunksize = filesize;
sid = connection._proto.sid;
log('sendFile: to=' + to);
// send a stream initiation
connection.si_filetransfer.send(to, sid, filename, filesize, mime, function(err) {
    fileTransferHandler(file, err);
 });
}

function fileTransferHandler(file, err) {
log("fileTransferHandler: err=" + err);
if (err) {
return console.log(err);
}
var to = $('#to').get(0).value;
chunksize = file.size;

chunksize = 20 * 1024;

// successfully initiated the transfer, now open the band
connection.ibb.open(to, sid, chunksize, function(err) {
log("ibb.open: err=" + err);
if (err) {
  return console.log(err);
}


readChunks(file, function(data, seq) {
  sendData(to, seq, data);
});
});
}

function readAll(file, cb) {
var reader = new FileReader();

// If we use onloadend, we need to check the readyState.
reader.onloadend = function(evt) {
  if (evt.target.readyState == FileReader.DONE) { // DONE == 2
    cb(evt.target.result);
  }
};

reader.readAsDataURL(file);
}

function readChunks(file, callback) {
var fileSize = file.size;
var chunkSize = 20 * 1024; // bytes
var offset = 0;
var block = null;
var seq = 0;

 var foo = function(evt) {
   if (evt.target.error === null) {
    offset += chunkSize; //evt.target.result.length;
    seq++;
    callback(evt.target.result, seq); // callback for handling read chunk
   } else {
    console.log("Read error: " + evt.target.error);
    return;
   }
  if (offset >= fileSize) {
  console.log("Done reading file");
  return;
  }

  block(offset, chunkSize, file);
  }

  block = function(_offset, length, _file) {
  log("_block: length=" + length + ", _offset=" + _offset);
  var r = new FileReader();
  var blob = _file.slice(_offset, length + _offset);
  r.onload = foo;
  r.readAsDataURL(blob);
 }

  block(offset, chunkSize, file);
  }

   function sendData(to, seq, data) {
   // stream is open, start sending chunks of data
   connection.ibb.data(to, sid, seq, data, function(err) {
   log("ibb.data: err=" + err);
   if (err) {
    return console.log(err);
   }
   // ... repeat calling data
   // keep sending until you're ready you've reached the end of the file
  connection.ibb.close(to, sid, function(err) {
  log("ibb.close: err=" + err);
  if (err) {
    return console.log(err);
  }
  // done
 });
});
}



$('#btnSendFile').bind('click', function() {
console.log('File clicked:');
sendFileClick();
});

Full code is based on: Complete example of Strophe.js file transfer http://plnkr.co/edit/fYpXo1mFRWPxrLlgr123 (source can be download here: has errors). I changed the sendFileClick function. I am getting:

ibb.open: err=Error: feature-not-implemented? Why is this error I am getting?