Remove/edit .file-path text after file select

Topic: Remove/edit .file-path text after file select

kyrro asked 7 years ago

Hello, I was wondering if there is a way to edit the text of a .input.file-path field after a file has been selected. The file path text seems to be quite magical, and I would like to remove it so that my change event can trigger when the user selects the same file again, after correcting certain errors that the file upload depends on. This is solvable by using disabled attributes and checking those fields before enabling the button, but having a way to edit that text would be appreciated. Adding CSS to the field seems to work fine, but I can't seem to get a hold of the text.

<div class="btn phcolor btn-sm float-left">
    <span>Choose file</span>
    <input id="file_select" data-target="#target" class="upload-field" name="file_upload[]" type="file">
</div>
<div class="file-path-wrapper">
    <input id="target" class="file-path validate" type="text" placeholder="File">
</div>

$( "#file_select").on('change', function(){
    let something = false;
    if(!something){
         let $target = $( $( this ) ).data('target');
         $target.val(""); //nothing happens, and a new change event is not triggered if the user selects the same file again. Same for .text()
    }
});


Thanks for any help.

kyrro commented 7 years ago

I must have derped a little. Changing the .val() of the file input itself changes the text content of the .file-path.

Add comment

Mikołaj Smoleński staff answered 7 years ago