I have an input field, where users can choose what image they want to upload, and then I need to send to cloud storage. The problem is, I don't know how to get the file they selected. I saw a lot questions like this, this, this, etc. Most of the questions I saw, like this one, are asking for previewing the images BEFORE uploading. I don't think I need to preview the image, i just want to upload it. How do I do this? Here is my current code:
function addImage() {
$("#addImage").append('\
<input type="file" id="image" accept="image/*">\
<button type="submit">ok</button>\
<button onclick="cancelAddImage()">cancel</button>');
$("#addImage").submit(function() {
var image = $("#image").files;
console.log(image);
storage.ref("images").put(image).then(function(snapshot) {
console.log('Uploaded a file!');
});
});
}
The console.log() for this is giving "undefined". I also tried .files[0]
instead of .files;
, and many others.