Vue js : post file to api

Question

i have code below in vue js and i wanted to share a file as u can see, but my problem is i want to save that file name that i uploaded to the API json in post method, is there a way to do it and thanks in advance

 <div class="input-file"> <input class="input-file__input" ref="file" type="file"> <div class="input-file__button" @click="selectFile()"></div> </div> <script> selectFile(){ let fileInputElement = this.$refs.file; fileInputElement.click(); //i want to send this file name to api post method //... }, </script>

Answer 1

You can try to subscribe to change event in order to get a selected file:

<input class="input-file__input" ref="file" type="file" @change="changeFile">

changeFile(event) {
  const file = event.target.files[0]
}

Answer 2

Assume that you have an input with 'upload' id, then:

 log_file_name() { const path = document.getElementById('upload').value; if (path) { let startIndex = (path.indexOf('\\') >= 0? path.lastIndexOf('\\'): path.lastIndexOf('/')); let filename = path.substring(startIndex); if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) { filename = filename.substring(1); } console.log(filename); } }

 <input class="input-file__input" id="upload" @change="log_file_name()" ref="file" type="file">