画像のプレビューを消去した後、画像をアップ出来るようにしたい

Question

ファイルを選択してプレビューを出して、消去するところまでは出来たのですが、消去した後、再度ファイルを選択してみるとプレビューが表示されませんので、これをどうにかしたいです。

  <input type="file" name="post[recipe_image]" id="post_recipe_image">
  <div id="preview"></div>
  <button class="delete_btn">消去</button>

function imgPreView(e) {
  let file = e.target.files[0];
  let reader = new FileReader();
  let preview = document.getElementById("preview");
  let previewImage = document.getElementById("previewImage");
   
  if(previewImage != null) {
    preview.removeChild(previewImage);
  }else{
    console.log(previewImage)
  }
  reader.onload = function(e) {
    let img = document.createElement("img");
    img.setAttribute("src", reader.result);
    img.setAttribute("id", "previewImage");
    preview.appendChild(img);
  };
 
  reader.readAsDataURL(file);
}
function deletePreViewImage(e) {
  e.preventDefault();
  let previewImage = document.getElementById("previewImage");
  previewImage.remove()
}

const image_preview = document.getElementById('post_recipe_image')
image_preview.addEventListener("change", imgPreView)
const delete_btn = document.querySelector(".delete_btn")
delete_btn.addEventListener("click", deletePreViewImage);

Answer 1

リロードしたら出来ましたすみません。

Answer 2

リロードしたら出来ましたすみません。