Having trouble transferring file using Vue.js and Axios

I am attempting to send a file to a Java backend using axios and vue.js. The backend is functioning properly as I can successfully reach it using the provided curl command.

curl --location --request POST 'http://localhost:8081/steg/aaa' --form 'file=@"/home/mycomputer/Files/image.png"' -o result.png

However, when trying to perform the same action from the application GUI, I consistently receive a 400 error:

https://i.sstatic.net/YZtV5.png

I'm unsure why this might be happening. Here is the code for the component in question to see if it aligns with the behavior of the curl command:

<template>
  <div class="steg">
    <input type="file" @change="onFileSelected">
    <input type="text" v-model="secretText" placeholder="edit me">
    <button @click="onUpload"> Steg</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Steg",
  data() {
    return {
      selectedFile: null,
      secretText: null
    }
  },
  methods: {
    onFileSelected(event) {
      this.selectedFile = event.target.files[0]
    },
    onUpload() {
      const formData = new FormData()
      formData.append('image', this.selectedFile, this.selectedFile.name)
      axios.post('http://localhost:8081/steg/' + this.secretText, formData)
          .then(response => {
            console.log(response.status)
          })
    }
  }
}
</script>

<style scoped>

</style>

Despite the working curl command, the Vue app isn't functioning correctly. In an effort to troubleshoot, I will include the relevant Java backend code below, even though I believe it to be correct:

    @CrossOrigin
    @RequestMapping(value = STEG_ENDPOINT, method = POST, produces = APPLICATION_OCTET_STREAM_VALUE)
    public @ResponseBody
    byte[] steg(@PathVariable String text, @RequestParam(value = "file", required = true) final MultipartFile file) throws IOException {

        userInputValidator.validate(file.getBytes(), text);
        return textStegService.steg(text, file.getBytes());
    }

The Java debugger doesn't pinpoint any issues within the Java code, indicating that the problem lies within the request itself. However, the exact cause remains unclear at this time.

Answer №1

It appears that using this.secretText is more suitable than this.secretText.value for constructing the URL arguments.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

No action detected following the import into Redux form

This is my very first project in React. After completing a training course on Udemy, I have reached the following code but am stuck trying to integrate the action into the container (Is Container correct?). Here is the code I have put together from variou ...

Performing an Ajax MySQL query utilizing the text from a link as a reference, across a page

I have a page with several links. When a user clicks on a link, the text from the link is used in the WHERE clause of a MySQL query, and the result is displayed on the page using ajax. I'm trying to run different queries based on multiple ids or clas ...

Tips for adding page numbers to a PDF created from HTML using wkhtmltopdf

Our response: We currently utilize wkhtmltopdf for generating PDFs from a specified html template. A brief overview: We incorporate Sulu CMF in constructing our backend, which is built on Symfony2. The KnpSnappy Bundle acts as a Symfony wrapper for wkht ...

oidc-client.js throws an error stating that no authority was provided

As someone new to SSO, I have recently been immersed in a project that utilizes OIDC. My focus has been on using oidc-client to address the issues at hand. Below are my settings (with some details redacted for privacy). var mgr = new Oidc.UserManager({ ...

Tips for avoiding multiple instances of Vue Snotify confirm from appearing

I'm fairly new to Vue and Snotify, so please excuse my beginner question. I've gone through the documentation but haven't found a solution. Here's what's going on: Within a Vue component, I have a feature that allows users to dele ...

Display the @NotBlank error message solely if the field is not filled

I have successfully implemented a form validation system using Spring MVC. Below is the User object class I have created: public class User{ @NotEmpty @NotBlank @Size(min=3,max=20) private String name; ..... } Currently, if the "n ...

Experiencing a glitch with the Realtime Database feature on Firebase

// db.js file import * as firebase from "firebase/app" import "firebase/database" const config = { apiKey: "" ... } const db = firebase.initializeApp(config) export default db // App.vue ...

Tips for creating a mobile-responsive React + MUI component

A React component utilizing Material-UI (MUI) has been created and I am working on making it mobile responsive. The current appearance is as follows: https://i.stack.imgur.com/8z0T8.png My goal is to have it look like this: https://i.stack.imgur.com/L8g ...

Is it necessary to include a back button when navigating through paginated tables?

Within my AngularJS application, I have implemented pagination on the user list page. This allows me to retrieve ten users at a time from the server, with each click loading another set of ten users on a new page. The user details are presented in a tabl ...

Error: Incompatible major version 61 detected in Cordova for Mac

Currently, I am using a Mac with Big Sur and I am trying to develop a Cordova app for Android. I have recently installed Java 17 and Gradle 7.1.1. Interestingly, I can successfully build the project on another Windows computer without any issues. However, ...

transferring information to d3.js

I have a json object structured in the following way { "tweet":[ {"text": "hello world"}, {"text": "hello world"} ] } When I check the console output of "data" in my code below, it shows me an Object tweet: Array[131]. However, when I l ...

Ignoring CSS transitions by changing the width property in JavaScript’s element.style

When attempting to create a smooth progress bar animation by adjusting the width using document.querySelector('#mydiv').style.width = '20%', I noticed that the new width is updated instantly rather than transitioning smoothly. It seems ...

VueJS appears to be failing to generate chunks for lazily loaded route components

One peculiar issue I am facing in my VueJS application is related to the router and the LoadingPage.vue component. The router configuration for this component looks like this: { path: "/loading", name: "loading", component: () =&g ...

Encounter the "Error: Source 'cloudsTileLayer-RasterSource' not found" message while trying to integrate a weather tile layer into Azure Maps

I have been working on a React application that utilizes the React-Azure-Maps npm package. My current challenge involves creating a weather layer, which I believe shares similarities with the sample code provided for layers. The code snippet responsible f ...

Retrieving an Ajax response by using form.submit() and sending it to PHP

After spending hours trying to mix a form.submit() call with a jquery/ajax call in order to receive a response from my php login script, I am at a loss. Despite looking through countless posts and examples on the same topic, I can't seem to find a sol ...

Sending an Angular scope variable to JavaScript

I am working with an angular scope variable that is being used in ng-repeat. My goal is to create a chart that starts from a specific date, ends at another date, and includes a marker for the current day. I am utilizing loader.js for drawing the charts in ...

Utilizing a range input (slider) to extract data of importance

When dynamically adding a slider to a page using a specific string, like the one shown below: "<input type=\"range\" name=\"aName\" min=\"1\" max=\"9\"/>"; After appending it to the page with pure JavaScript, ...

What are some strategies for circumventing the need for two switches?

My LayerEditor class consists of two private methods: export class LayerEditor { public layerManager: LayerManager; constructor() { this.layerManager = new LayerManager(this); } private executeCommand() { ...

Vuejs: Users can still access routes even after the token has been deleted

Upon logging out of my application, I have encountered a peculiar issue. Certain inner links, such as those within a user's panel, remain accessible even after I have logged out and deleted a token. However, other links are not. Any suggestions on how ...

Having difficulty naming the request while using ajax to send data to a local server

I have set up an AJAX request to be sent to my PHP server: var xml = new XMLHttpRequest(); xml.open("POST", "request.php", true); xml.setRequestHeader('query','test'); xml.send(); Upon receiving the AJAX data in PHP, I am facing some ...