Submitting Files to the API using Vue.js

Question

Submitting Files to the API using Vue.js

I have the following code in Vue.js and I am trying to upload a file, but my issue is that I want to save the filename of the uploaded file to the JSON API using a POST method. Is there a way to achieve this? Thank you 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 filename to the API POST method
      // ...
    },
    </script>

javascript vue.js

Answer 1

Answer №1

Imagine you are working with an input element that has the id 'upload', here is what you can do:

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

Answer 2

Imagine you are working with an input element that has the id 'upload', here is what you can do:

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

Answer 3

Answer №2

To retrieve the selected file, one option is to listen for the change event:

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

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

Answer 4

To retrieve the selected file, one option is to listen for the change event:

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

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

Submitting Files to the API using Vue.js

Answer №1

Answer №2

Similar questions

In the process of making a request with axios in an express server

What is the process for incorporating beforeAnimate and afterAnimate callbacks into a custom jQuery plugin?

Utilize API to import sunrise and sunset times based on specific coordinates directly into a Google Sheet

Leveraging Python to authenticate on a website using JavaScript and secure HTTPS connection

Blogger's homepage URL obtained using JSON data

JavaScript slice() method displaying the wrong number of cards when clicked

Issues with Weglot link hooks not functioning properly within the sticky header

Is there a way to include two functions within a single ng-click event?

Breaking the layout using recursive components in VueJS

Issue with Submit Button Functionality following an Ajax Request

What is the process behind Twitter's ability to quickly show my profile?

Understanding the separation and communication techniques in Vue.js components

Mastering the utilization of the Data object in VueJS with Decorators can be tricky. One common error message you might encounter is, "Class method 'data' expected 'this' to be used."

Utilize Element-UI to effectively close dropdown menus

The Angular Universal error arises due to a ReferenceError which indicates that the MouseEvent is not

Tips for retrieving arguments within a method called from a template in vue.js?

Is there a way to substitute the final character in the specific regex I've selected?

Monitor constantly to determine if an element is within the visible portion of the screen

"Error: React dotenv is unable to access the .env configuration file

Is there a way to invoke a class method from the HTML that is specified within its constructor function?