Show and not show image if button is clicked in javascript

Question

so I have a file button that lets a user select a video to upload it and another button that uploades the video but when a video is selected a preview has to appear before it is uploaded. The problem is that even tho there is no video selected, there is alot of space of where the video should be and the goal that if the video button is not clicked then the video should be on display: none but if it is clicked then the video has too appear. It is like the video or image preview of facebook.

const realFileBtn = document.getElementById("id_video");
const customBtn = document.getElementById("custom-b");

customBtn.addEventListener("click", function() {
    realFileBtn.click();
});

$(document).on("change", ".file_multi_video", function(evt) {
    var $source = $('#video_here');
    $source[0].src = URL.createObjectURL(this.files[0]);
    $source.parent()[0].load();
});

input {
    border: none;
    order: 0;
    font-family: sans-serif;
    padding: 5px;
    border-radius: 7.5px;
    width: 100%;
    height: 35px;
    display: flex;
}

#custom-b {
    border: none;
    font-family: sans-serif;
    padding: 5px;
    order: 1;
    border-radius: 7.5px;
    width: 15%;
    display: flex;
    justify-content: center;

}

.preview-image {
    width: 100%;
    height: 100%;
    display: flex;
    order: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    align-self: center;
}
.uploades .submit-button {
    border: none;
    font-family: sans-serif;
    padding: 5px;
    order: 2;
    display: flex;
    border-radius: 7.5px;
    width: 100%;
    margin-top: 16px;
    justify-content: center;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
                    <input type="text" name="text" placeholder="Add a comment..." required="" id="id_text">
                    <input type="file" name="video" id="id_video" accept="video/*" class="file_multi_video" style="display: none;">
                    <video id="blah" class="preview-image">
                        <source id="video_here">
                    </video>
                    <button type="button" class="video-button" id="custom-b">video</button>
                </div>

                <button class="submit-button" type="submit">Save</button>

Any questions please let me know;)

Answer 1

With the fewest modifications to your code, you can use the jQuery "hide" / "show" functions.

For this you'll need to start loading the element in an invisible state like these functions do with the "display:none" style. And then you can call the right function depending on whether a file has been selected or not.

As you can see below...

const realFileBtn = document.getElementById("id_video");
const customBtn = document.getElementById("custom-b");

customBtn.addEventListener("click", function() {
  realFileBtn.click();
});

$(document).on("change", ".file_multi_video", function(evt) {
  var $source = $('#video_here');
  var $source_parent = $source.parent();
  //ensure that a file has been selected
  if (this.files[0] !== undefined) {
    $source[0].src = URL.createObjectURL(this.files[0]);
    $source_parent[0].load();
    $source_parent.show();
  } else {
    $source_parent.hide();
  }
});

input {
  border: none;
  order: 0;
  font-family: sans-serif;
  padding: 5px;
  border-radius: 7.5px;
  width: 100%;
  height: 35px;
  display: flex;
}

#custom-b {
  border: none;
  font-family: sans-serif;
  padding: 5px;
  order: 1;
  border-radius: 7.5px;
  width: 15%;
  display: flex;
  justify-content: center;
}

.preview-image {
  width: 100%;
  height: 100%;
  display: flex;
  order: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  align-self: center;
}

.uploades .submit-button {
  border: none;
  font-family: sans-serif;
  padding: 5px;
  order: 2;
  display: flex;
  border-radius: 7.5px;
  width: 100%;
  margin-top: 16px;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" name="text" placeholder="Add a comment..." required="" id="id_text">
  <input type="file" name="video" id="id_video" accept="video/*" class="file_multi_video" style="display: none;">
  <video id="blah" class="preview-image" style="display:none">
    <source id="video_here">
  </video>
  <button type="button" class="video-button" id="custom-b">video</button>
</div>

<button class="submit-button" type="submit">Save</button>