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>

hassan-pudineh · Accepted Answer · 2020-12-17 20:26:47Z

1

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">

answered Dec 17, 2020 at 20:26

hassan-pudineh

829 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anatoly · Accepted Answer · 2020-12-17 20:07:24Z

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]
}

answered Dec 17, 2020 at 20:07

Anatoly

23.2k3 gold badges33 silver badges46 bronze badges

2 Comments

sara97 Over a year ago

sorry if my question seems weird but i'm new to vue , in this way can i get the file name , like for ex i uploaded file index.html so i get index.html in api json?

Anatoly Over a year ago

just look at file. There should be something like name.

Collectives™ on Stack Overflow

Vue js : post file to api

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related