Hello-
I am working on a form that currently has a standard File Upload field for a single file. I have a javascript function triggered by the onchange event on that field that is working well. However, I am looking to implement that same function on a File Upload field that has multi-file turned on and I can’t get the event to trigger. I’m assuming that the element ID I need to watch for that event on is something different than input_{form id}_{field id}, but I can’t figure out what it needs to be. Has anybody had any experience with anything like this?
Here is the javascript as it currently works for the single-file upload:
document.getElementById('input_3_15').onchange = setFileInfo;
function setFileInfo() {
function readFileDuration(file){
return new Promise((resolve, reject)=>{
//var type = mime.split("/")[0];
var type = 'video';
var video = document.createElement(type);
video.preload = 'metadata';
video.onloadedmetadata = function() {
//When the onloadedmetadata function responds, we execute the following
window.URL.revokeObjectURL(video.src);
if (isNaN(video.duration) == false) {
//this is the moment where the readFileDuration return a value
resolve(video.duration);
}else{
resolve(0);
}
}
video.src = URL.createObjectURL(files[i]);;
})
}
console.log(this);
let promisesArray = [];
var counter = 0;
var files = this.files;
var secs = 0;
//We create an array of promises
for (i=0; i < files.length; i++) {
promisesArray.push(readFileDuration(files[0]))
}
//We instruct to execute all promises
Promise.all(promisesArray).then(results =>{
/* this code only executes when all promises have resolved their value.
The result is an array with all returned values
*/
for (i=0; i < results.length; i++) {
secs += results[i];
}
var mins = Math.ceil(secs / 60);
jQuery("#input_3_14").val(mins).change();
});
}
Thanks!
Chris