Try to upload data and image from form in submit

Question

I am new to this and can't figure it out what i am missing

I search it and can't find suitable solution

here is my code

// create menu
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change', function(e) {
  var file = e.target.files[0];
  var storageRef = firebase.storage().ref(userID + 'foodImg/'+file.name);
storageRef.put(file);
// get download URL
storageRef.getDownloadURL().then(function(downloadURL) {
  console.log('File available at',downloadURL);
  const createMenuForm = document.querySelector('#mydropzone');
                createMenuForm.addEventListener('submit', (e) => {
                e.preventDefault();
                db.collection('restaurants').add( {
                   foodLine: {
                   menuTitle: createMenuForm.menuTitle.value
         },
                food: {
               foodName: createMenuForm.foodName.value,
               imageURL: downloadURL,        
               inputCalories: createMenuForm.inputCalories.value,
               menuItemDescription: createMenuForm.menuItemDescription.value,
               menuItemInfo: createMenuForm.menuItemInfo.value
         }
}).then(() => {
  //reset form
 createMenuForm.reset();
}).catch(err => {
 console.log(err.message);
});
});
});
});

And my html just post the image section cause its too big

<div class="form-row">
<div class="form-group ml-2 col-sm-6">
<label>Menu Item Image</label>
<div id="msg"></div>
<input type="file" name="img[]" class="file" accept="image/*"  id="fileButton">
<div class="input-group my-3">
<input type="text" class="form-control" disabled placeholder="Upload File" id="file" required>
<div class="input-group-append">
<button type="button" class="browse btn btn-primary"><i class="fas fa-folder-open mr-2"></i>Browse...</button>
 </div>
 </div>
 <div class="ml-2 col-sm-6">
 <img src=" " id="preview" class="img-thumbnail">
 </div>
 </div>
 </div>
 <button type="submit" class="btn btn-primary btn-block mb-3">Submit Menu</button>

and here is the jQuery code for

$(document).on("click", ".browse", function() {
var file = $(this).parents().find(".file");
file.trigger("click");
});
$('input[type="file"]').change(function(e) {
var fileName = e.target.files[0].name;
$("#file").val(fileName);
var reader = new FileReader();
reader.onload = function(e) {
// get loaded data and render thumbnail.
document.getElementById("preview").src = e.target.result;
};
// read the image file as a data URL.
reader.readAsDataURL(this.files[0]);
});

Nothing happens don't get any error and don't save it to db

Answer 1

var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change', function(e){
var file = e.target.files[0];
var storageRef = firebase.storage().ref('foodImg/'+file.name);
var task = storageRef.put(file);
task.on('state_changed', function progress(snapshot) {
  var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
  uploader.value = percentage;

}, function (error) {
  console.error(error);

},function () {
  task.snapshot.ref.getDownloadURL().then(function(downloadURL) {
      console.log('File available at',downloadURL);
      const createMenuForm = document.querySelector('#mydropzone');
      createMenuForm.addEventListener('submit', (e) => {
      e.preventDefault();
      db.collection('restaurants').add( {
         foodLine: {
         menuTitle: createMenuForm.menuTitle.value
},
      food: {
     foodName: createMenuForm.foodName.value,
     imageURL: downloadURL,        
     inputCalories: createMenuForm.inputCalories.value,
     menuItemDescription: createMenuForm.menuItemDescription.value,
     menuItemInfo: createMenuForm.menuItemInfo.value
}
}).then(() => {
//reset form
createMenuForm.reset();
}).catch(err => {
console.log(err.message);
});
});
});
}); 
});