How to limit the number of characters in a custom input type="file"?

Question

JavaScript

<label class="fileBtn limit-characters form-control form-control-lg">
                  <input @click="currentId='file1'"
                         type="file"
                         id="file1"
                         v-on:change="handleFileUpload"/>
                  <span id="file-name">Прикрепить</span>
                </label>

handleFileUpload: function (event) {
      if (this.currentId === 'file') {
        this.file = event.target.files[0];
        document.getElementById("file-name").innerHTML = this.file.name;
      }
}

There is a "custom" input for uploading a file, the file name is displayed in the label.
How can I make the output of the file name in the label as Нов...файл.txt?

Answer 1

methods: {
  short: str => str.replace(/(?<=^.{3}).{4,}(?=.{8}$)/, '...'),
  ...

<span>{{ file ? short(file.name) : 'Прикрепить' }}</span>

Answer 2

let name = "Новый файл.txt";
let new_name = name.substring(0, 3) + "..." + name.substr(-8);