<input type="file" onchange="uploadFiles()" multiple/>
After storing the input value in a variable and resetting the input field, the variable becomes empty
function uploadFiles(){
var newFiles = $('input')[0].files;
$('input').replaceWith($('input').val('').clone(true));
console.log(newFiles); // result == []
}
Please how do I fix this?
$('input')[0].files gives you the FileList property of the input, which is attached to it. Changing the value of the input will result in changing the value of the property and all its assignments.
You can work around the problem by adding the files to a separate array:
var newFiles = $('input')[0].files;
var filesArray = [];
for(var i=0; i<newFiles.length; i++){
filesArray[i] = newFiles[i];
}
$('input').replaceWith($('input').val('').clone(true));
console.log(newFiles); // result == []
console.log(filesArray); // result == [File]
Note: For security reasons, you may or may not use the Files as intended after changing the value of the original input. I haven't tested it though. If you can confirm or debunk, please comment.
This is because your onchange event gets fired a second time when you reset the input field. Resetting the input field is considered a change.
A way around this would be to temporarily disable the onchange events while you update the value.
// remove the change handler
$('input').off('change', uploadFiles);
$('input').val('');
// re-establish the change handler
$('input').on('change', uploadFiles);
Note: it isn't a good idea to mix inline event handlers (onchange="whatever") with handlers in your script. You should just jQuery on().
.val(''), which doesn't trigger onchange automatically.
.val() isn't the issue, it's replacing the input that's considered the change.