I'm working on a custom UI for your web messaging. As far as I can tell, the SDK doesn't allow you to upload multiple files at a time. If I execute a MessagingService.requestUpload more than once, it seems that your system just ignores the extra files. Which I think is expected.
So I attempted to work around this by just uploading the files in a loop but it seems that when I try to upload additional files too quickly, your SDK is throwing an uncaught exception that prevents the upload from working. If I put a delay in between the uploads, it seems to work.
Here's an example HTML file demonstrating this and the resulting console error below. You can see the first file results in uploadApproved, uploading and fileUploaded events. The second file gets uploadApproved (twice) but no uploading and no fileUploaded events and there is an uncaught Promise. In this code, I have a setTimeout with 100ms on it. This is not enough to make this work. If I change the timeout to 1000ms, then the second file uploads fine. So there is some bits of the SDK that don't like doing file uploads too quickly. But putting a 1000ms delay in my code makes me nervous because I have no idea if 1000ms is a good number or if it should be bigger. And the fact that no error is actually reported through your even handlers means my code can't know that the file upload failed and in this code, all file uploads then get stuck.
I would appreciate any advice you might have.
<html lang="en">
<head>
<title>Genesys OOTB (Web messenger)</title>
</head>
<body>
<input id="select-files" type="file" multiple value="Files"/>
<button onClick="doUploads()">Upload</button>
<script type="text/javascript" charset="utf-8">
(function (g, e, n, es, ys) {
g['_genesysJs'] = e;
g[e] = g[e] || function () {
(g[e].q = g[e].q || []).push(arguments)
};
g[e].t = 1 * new Date();
g[e].c = es;
ys = document.createElement('script'); ys.async = 1; ys.src = n; ys.charset = 'utf-8'; document.head.appendChild(ys);
})(window, 'Genesys', 'https://apps.cac1.pure.cloud/genesys-bootstrap/genesys.min.js', {
environment: 'cac1',
deploymentId: '...',
});
</script>
<script>
let files;
function doUploads() {
files = Array.from(document.querySelector('#select-files').files);
console.log('Uploading files', files);
doNextUpload();
}
function doNextUpload() {
if (files.length) {
const nextFile = files[0];
files.splice(0, 1);
const transfer = new DataTransfer();
transfer.items.add(nextFile);
console.log('Uploading next file', nextFile);
Genesys('command', 'MessagingService.requestUpload', { file: transfer.files });
}
}
function handleUploaded() {
// We need to send a message to actually deliver the file.
Genesys('command', 'MessagingService.sendMessage', { message: 'Have a file' });
setTimeout(() => {
doNextUpload();
}, 100);
}
Genesys('subscribe', 'MessagingService.fileUploaded', () => handleUploaded());
</script>
<script>
function addEvents() {
addEvent('MessagingService.messagesReceived');
addEvent('MessagingService.uploading');
addEvent('MessagingService.uploadApproved');
addEvent('MessagingService.fileUploaded');
addEvent('MessagingService.fileUploadError');
addEvent('MessagingService.fileUploadCancelled');
addEvent('MessagingService.fileReceived');
addEvent('MessagingService.messagesUpdated');
}
function addEvent(eventName) {
Genesys('subscribe', eventName, (...args) => {
console.log(`[GenesysOOTB] (All) ${eventName}`, args);
});
}
addEvents();
</script>
</body>
</html>
