I need to change this code so that the condition checks the file extensions of all the selected files from multiple select file input, this code only checks for one. Any way I can do this?
var file = document.getElementById('file');
var ext = file.value.substring(file.value.lastIndexOf('.') + 1);
if(ext!== "mp4" && ext!== "m4v" && ext!== "f4v") {
alert('not an accepted file extension');
return false;
}
<input id="file" name="uploaded[]" type="file" multiple />
Note I only bothered to get the last three characters of the string because you only have three letter file extensions. If you wanted you could use .split('.') to get an array of segments and choose the last element of that array.
var selection = document.getElementById('file');
for (var i=0; i<selection.files.length; i++) {
var ext = selection.files[i].name.substr(-3);
if(ext!== "mp4" && ext!== "m4v" && ext!== "fv4") {
alert('not an accepted file extension');
return false;
}
}
To get all the input elements within an array of dom elements use document.getElementsByName('uploaded[]').
For example in your case it would be something like:
var files = document.getElementsByName('uploaded[]');
for (var i = 0, j = files.length; i < j; i++) {
var file = files[i];
// do stuff with your file
}
Multiple files validation through javascript some() method.
function isVideo(film) {
const ext = ['.mp4', '.m4v', '.fv4'];
return ext.some(el => film.endsWith(el));
}
function fileValidation() {
let files = document.getElementById('file');
for (let i = 0; i < files.files.length; ++i) {
let fname = files.files.item(i).name;
if (!isVideo(fname)) {
alert("File extension not supported!");
return false;
}
}
}<input id="file" name="uploaded[]" type="file" multiple onchange="fileValidation()" /> <input name="" id="yourinputfieldis" onchange="checkFile()" type="file" multiple = "multiple" accept = "*">
<script>
function checkFile() {
var x = document.getElementById("yourinputfieldis");
var txt = "";
document.getElementById("demo").innerHTML = txt;
if ('files' in x) {
if (x.files.length == 0) {
txt = "Select one or more files.";
} else {
for (var i = 0; i < x.files.length; i++) {
var file = x.files[i];
if ('name' in file) {
var ext = file.name.split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg','doc','pdf','xlsx']) == -1) {
txt += "name: " + file.name + "<br>";
document.getElementById("yourinputfieldis").value = "";
if ('size' in file) {
txt += "size: " + file.size + " bytes <br>";
}
alert('You are trying to upload files which not allowed ' + "(" + file.name + " is invalid)");
}
}
}
}
}
else {
if (x.value == "") {
txt += "Select one or more files.";
} else {
txt += "The files property is not supported by your browser!";
txt += "<br>The path of the selected file: " + x.value;
}
}
}
</script>
Use this method to validate file types in aspx page,
<asp:FileUpload ID="fupload" name="fupload" runat="server" Class="form-control multi" accept="doc|docx|pdf|xls|xlsx" Width="270px" />
And I have used "MultiFile.js" plugin to choose Multiple file and Upload.
