Why does my code not allow uploading the same image file twice in a row?

C

2

6

I have tried as best as I could to reduce my code to the absolute minimum. I hope it's not too long. The below code helps upload and remove the preview of image files. The only problem is that it doesn't upload the same image twice in a row. That is, upload image a, remove image a and upload it again. Nothing happens and the default image remains there when I try to upload an image a second time right after removing it. but uploading image a and then replacing it with image b is working without a problem. I couldn't find the bug in my code. I am a beginner learning HTML-javascript and don't know how to solve this. Any help is appreciated, thanks!

function changeProfile() {
  $('#image').click();
}

$('#image').change(function() {
  var imgPath = this.value;
  var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg")
    readURL(this);
  else
    alert("Please select image file (jpg, jpeg, png).")
});

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.readAsDataURL(input.files[0]);
    reader.onload = function(e) {
      $('#imgPreview').attr('src', e.target.result);
      addDeleteBttn();
    };
  }
}

function removeImage() {
  $('#imgPreview').attr('src', 'Anzeige%20erstellen-Dateien/default.png');
  removeDeleteBttn();
}

function addDeleteBttn() {
  document.getElementById("btnDeletePhoto").style.display = "block";
}

function removeDeleteBttn() {
  document.getElementById("btnDeletePhoto").style.display = "none";
}

``
`

#bildBttn {
  position: absolute;
  top: 38%;
  left: 18.2%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: white;
  cursor: pointer;
  border-radius: 5px;
  color: black;
  text-align: center;
  border-color: lightgray;
  height: 50px ! important;
  width: 53px;
  border-radius: 4px;
  padding: 10x 17px;
  border-width: thin
}

.removeBttnClass {
  position: absolute;
  top: 38%;
  left: 22.7%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: white;
  cursor: pointer;
  border-radius: 5px;
  color: black;
  text-align: center;
  border-color: lightgray;
  height: 50px ! important;
  width: 53px;
  border-radius: 4px;
  padding: 10x 17px;
  border-width: thin
}

```

<!DOCTYPE html  >
<html lang="en" style="background:  #fffff0;">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" media="all" href="upload.css">
  <script type=text/javascript src="https://code.jquery.com/jquery-3.4.1.js"></script>

</head>

<body>
  <img id="imgPreview" src="default.png" width="500px" height="360px" style="padding-left:15px;" />
  <br/>
  <input type="file" id="image" style="display: none;">
  <!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->


  <a href="javascript:changeProfile()">
    <span class="btn btn-default btn-file" id="bildBttn">
                        <i title="Bild auswählen" class="fa fileinput-new fa-file-image-o" id="fotoIcon"></i></span>
  </a>
  <a id="removeBttnFrame" href="javascript:removeImage()">
    <div id="btnDeletePhoto" class="removeBttnClass" style="display: none"><i class="fa fa-trash-o" id="deleteIcon"></i></div>
  </a>


  <script src="uploadScript.js" data-turbolinks-track="reload"></script>

</body>

</html>

Capacitor answered 1/11, 2019 at 23:47 Comment(3)

Note: the <br> and <input> tags do not use and do not need a closing slash in HTML and never have. – Variance 1/11, 2019 at 23:51

I believe you! :) that probably happened, while i was trying to edit and shorten the original code for my question here. – Capacitor 1/11, 2019 at 23:53

Add a console.log() before the replacement instruction. From there inspect if it's called when you change image or not – Underachieve 2/11, 2019 at 0:11

L

6

You are listening on change event on file input #image.

When you delete the image you are not touching the #image element at all.

function removeImage() {
  $("#imgPreview").attr("src", "Anzeige%20erstellen-Dateien/default.png");
  removeDeleteBttn();
}

When you upload the same image again, the change event on #image won't get triggered.

To force a change event for same file upload, you need to alter the #image element from removeImage function.

Something like this.

function removeImage() {
  $("#imgPreview").attr("src", "Anzeige%20erstellen-Dateien/default.png");
  //Setting image val to "" to force a change event on same file upload
  $("#image").val("");
  removeDeleteBttn();
}

Lucilla answered 2/11, 2019 at 6:17 Comment(1)

Thank you very much! Also such a simple solution. Almost annoying, considering it caused me so much headache – Capacitor 2/11, 2019 at 7:59

G

4

add below code on onChange function / event.

"e.target.value" = null;

Gastrectomy answered 1/8, 2022 at 9:56 Comment(0)

Recommended topics

Hot tags