I can't reset input file inside form after submit

Question

I have a form with some fields and after submit finish i want to reset whole form but only reset input text areas not input type file.

I check every similar questions and solutions but none of them work for me.Some solutions refresh page which i don't want that.

<form class=" dropzone px-5" id="mydropzone">
  <h2 class="text-center">Lets create your menu</h2>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCalories">Calorie</label>
      <input type="text" class="form-control" id="inputCalories" required>
    </div>
    <div class="form-group col-md-6">
      <label for="cc">Calorie Calculator</label>
      <button id="cc" class="btn btn-primary btn-lg"><i class="fas fa-calculator mr-2"></i>Click Me</button>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group ml-2 col-sm-6">
      <label>Menu Item Image</label>
      <div id="msg"></div>
      <div class="progress" id="uploader">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div>
      </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>
  <!-- -------------------------------------------------------------------------- -->
  </div>
</form>

And my create menu which clear all fields after form submit.

// create menu
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();
          fileButton.value = "";
          var preview = document.getElementById('preview');
          preview.value = "";
        }).catch(err => {
          console.log(err.message);
        });
      });
    });
  });
});

Answer 1

Can you try these things also

document.getElementById("myForm").reset();
$("#myForm").trigger("reset");

Answer 2

I think you try to access createMenuForm outside the scope where const createMenuForm was declared.

Try to declare it above the event listener:

// create menu
const createMenuForm = document.querySelector('#mydropzone');
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
// ...

or directly with

document.querySelector('#mydropzone').reset();

Answer 3

i debug and find that preview need to be clean

document.getElementById("preview").src = "#";