JS Short Filename

HTML

<table>
    <tr>
        <td><label for="path">File</label></td>
        <td><input id="path" type="text" value="C:\Program" required /></td>
    </tr>
    <tr>
        <td><button id="shorten">UPDATE</button></td>
        <td><b id="result"></b></td>
    </tr>
</table>

CSS

table {
    width: 100%;
    font-family: calibri;
    border-collapse: collapse;
}

table td {
    padding: 2px 5px;
}

table td:first-child {
    text-align: right;
    width: 70px;
}

input {
    margin: 0;
}

#path { width: 80%; }

JavaScript

function shortenFilename(path, allowed) {
    // remove path
    var split = path.split("\\");
    var filename = split[split.length-1];
    
    // get extension
    var fileSplit = filename.split(".");
    var extension = fileSplit.length > 1 ? 
        '.' + fileSplit[fileSplit.length-1] : '';

    if(filename.length - extension.length > allowed) {
        var fileStart = filename.substring(0,allowed);
        return fileStart + '[...]' + extension;
    }
    else return filename;
}

function update() {
    var path = $('#path').val();
    $('#result').html(shortenFilename(path, 25));
}

$('#shorten').click(function(e) {
    e.preventDefault();
    update();
});
update();