cannot read property '0' of undefined 9 - firebase

Question

This the text from where im getting the error. The the code is located after function sendData(). Where it starts with the:
var file = this.files[0];
I want to make where a button sends the files to the storage and not when it detects the state has been changed
var database = firebase.database();
var uploader = document.getElementById("uploader");
var fileButton = document.getElementById("fileButton").value;
var title = document.getElementById("title").value;
var description = document.getElementById("description").value;
var d = new Date();
var month = d.getMonth();
var day = d.getDay();
var hour = d.getHours();
var minute = d.getMinutes();
firebase.auth().onAuthStateChanged(function(user) {
if(user) {
var currentUser = document.getElementById('currentUser').href = "#";
var currentUser = document.getElementById('currentUser').innerHTML = "Cuenta";
} else {
var currentUser = document.getElementById('currentUser').href = "/auth/login.html";
var currentUser = document.getElementById('currentUser').innerHTML = "Inicio De Sesión";
window.location.href = "/auth/login.html";
}
});
function sendData() {
var file = this.files[0];
var storage = firebase.storage().ref("News/" + file.name);
var task = storage.put(file);
task.on('state_changed', function(snapshot) {
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
uploader.value = percentage;
}, function error(err) {
console.log("Error: " + err);
alert("Error");
}, function() {
firebase.storage().ref("News/").child(file.name).getDownloadURL().then(function(url) {
var title = document.getElementById("title").value;
var description = document.getElementById("description").value;
var ref = database.ref("News");
var data = {
imageURL: url,
Title: title,
Description: description,
Date: month + "/" + day + " " + h + ":" + minutes
}
ref.push(data);
});
});
};
HTML: Code
<div class="mainContainer">
<h1>Database</h1>
<input id="title" placeholder="Título" type="text">
<textarea id="description" placeholder="Description"></textarea>
<br>
<progress id="uploader" value="0" max="100">
0%
</progress>
<br>
<input type="file" value="upload" id="fileButton" accept=".png, .mp4, .mp3, .pdf">
<button onclick="sendData()">Enviar</button>
</div>

Answer 1

Probably this.files is undefined and you are trying to access the element at index 0.