CODEWITHSUNDEEP
javascripthtmljavascript-objects
Brains Akd
Brains Akd

Reputation: 49

How to change the file input value after selected using javascript?

<div class="form-group">
<span class='btn btn-file btn-block  btn-default'> <i class='pe pe-7s-video'> </i> Choose from Library
<input type='file'  class='form-control' name='answer_video' accept='video/*' capture='camera' placeholder='Record' id='answer_video'></span>
</div>

How to change the value "Choose from Library" to "video selected" after choosing file through file input using javascript

Upvotes: 0

Views: 2480

Answers (4)

Ram Segev
Ram Segev

Reputation: 2571

You can use EventListener DOMContentLoaded and onchange do something reference here

document.addEventListener('DOMContentLoaded',function() {
document.querySelector('[type="file"]').onchange=changeEventHandler;
},false);

function changeEventHandler(event) {
    // You can use “this” to refer to the selected element.
     document.getElementById('video_option').innerHTML = 'video selected'; 
}
<div class="form-group">
<span  class='btn btn-file btn-block  btn-default'> <i class='pe pe-7s-video'> </i><span id='video_option'> Choose from Library</span>
<input type='file'  class='form-control' name='answer_video' accept='video/*' capture='camera' placeholder='Record' id='answer_video'></span>
</div>

Upvotes: 1

edkeveked
edkeveked

Reputation: 18401

You only need to use the onchange function with your input.

function changeName(){

document.getElementById("change").innerHTML = "changeName"

}
<div class="form-group">
<span id="change" class='btn btn-file btn-block  btn-default'> <i class='pe pe-7s-video'> </i> Choose from Library
</span>
<input type='file'  class='form-control' name='answer_video' placeholder='Record' id='answer_video' onchange="changeName()">
</div>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68433

On change event, check if the this.files are more than 0.

Demo

document.querySelector( "[name='answer_video']" ).addEventListener( "change", function(){
    if ( this.files.length > 0 )
    {
       this.parentNode.querySelector(".videoLabel").innerHTML = "file selected";
    }
    else
    {
       this.parentNode.querySelector(".videoLabel").innerHTML = "Choose from Library";
    }
});
<div class="form-group">
<span class='btn btn-file btn-block  btn-default'> <i class='pe pe-7s-video'> </i> <span class="videoLabel">Choose from Library</span>
<input type='file'  class='form-control' name='answer_video' accept='video/*' capture='camera' placeholder='Record' id='answer_video'></span>
</div>

Upvotes: 2

Ankur Kumar
Ankur Kumar

Reputation: 455

you may take help with jquery, hope it will help you.

$("input[type='file'][name='answer_video']").change(function(){
    var id = $(this).attr("id");
    var thisVal = document.getElementById(id).files[0].name;
    var nameBox = '<div class="fileContainer"><span class="docFileName">'+thisVal+'</span><span class="glyphicon glyphicon-remove" onclick=removeAttachment("'+id+'")>X</span></div>';
    $(this).before(nameBox).hide();
});

function removeAttachment(id){
    $("#"+id).val("").show();
    $(".fileContainer").remove();
}

Upvotes: 1

Related Questions