Issue with sending multiple files using FormData and axios in Vuex with Laravel. Server side consistently receiving null. Need help troubleshooting the problem

After trying the solution from my previous question Vuex + Laravel. Why axios sends any values but only not that one, which come's with method's parameter?, I realized that it only works when passing a single argument in axios. I managed to successfully send multiple files with one argument, but in my specific case, I need to use an object in order to pass more than one argument. This is why instead of

const response = await axios.post('/posts', data)

I had to use the following approach:

const response = await axios.post('/posts', {
                formData:data,
                body:postBody
            })

I initially thought this would be straightforward, but now I've spent 5 hours without finding a solution.

controller

public function store(Request $request)
    {
        $files = $request->all();
        return var_dump($files);
    }

I've tried various methods including $request->allFiles() and getClientOriginalExtension(), but none of them have yielded results. Do you have any suggestions on how to fix this issue?

Important! I'm using Laravel, Vuex, and Axios.
I cannot use FormData for text as it's inside a textarea. Even if I could combine the textarea within FormData to make a single argument axios call, it's crucial for me to understand the root cause of the problem I described above.

Updated

Here's the payload tab in Chrome:

Answer №1

It's somewhat baffling why all the necessary data isn't sent within the formData object.

You might consider implementing something like this:

const formData = new FormData()

formData.append(body, postBody)
formData.append(files, fileList)
formData.append(otherData, someOtherData)

const response = await axios.post('/posts', formData)

Subsequently, on your server side, you can access the data like so:

$body = $request->body;
$files = $request->files;
$otherData = $request->otherData;

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

Saving JSON format in VueX State Management

I'm relatively new to using Vue/VueX and I am exploring methods for storing JSON data in the VueX state. Initially, it seemed like a simple task: state { jsonthing: { ... } } However, I encountered an issue where getters return an Observer type ins ...

Why isn't $.post functioning properly in any instance?

I've been experiencing issues with my $.post calls throughout my code. Despite not sending requests to different domains, everything is localhosted. My Mac OS X 10.8 automatically defined my localhost alias as ramon.local, and I'm trying to make ...

An instructional HTML/JS dialogue for a linked page

On my website, there is a link that, when clicked, opens a new tab with a page that I don't control. I want to guide the user on what to do next after they are redirected to this new page ("Now please press the green button on this page"). Ideally, I ...

The 'in' operand is invalid

I am encountering a JavaScript error: "[object Object]" TypeError: invalid 'in' operand a whenever I attempt to perform an AJAX request using the following code: .data("ui-autocomplete")._renderItem = function( ul, item ) { return $( " ...

Adding functions to the prototype of a function in JavaScript

Is there a more concise way to simplify this code snippet? var controller = function(){ /*--- constructor ---*/ }; controller.prototype.function1 = function(){ //Prototype method1 } controller.prototype.function2 = function(){ //Prototyp ...

Having trouble accessing the iframe element in an Angular controller through a directive

My webpage contains an iframe with a frequently changing ng-src attribute. I need to execute a function in my controller each time the iframe's src changes, but only after the iframe is fully loaded. Additionally, I require the iframe DOM element to b ...

Vuetify Event Calendar

Currently, I am using the Vue calendar with Vuetify version 2.1.x. I am trying to retrieve the time from a specific slot when it is clicked like this: @click:time="test" <v-calendar ref="calendar" :locale="$i18n.locale" v-model="schedulerObj.calV ...

Navigating to a URL using "res.render" following the process of fetching POST data from the DOM array in Node.js

Despite browsing through numerous related questions, I am still unsure about the best approach to render a URL after the frontend JavaScript collects DOM data and sends a POST request to an Express server's POST URL. I understand that fetch POST does ...

Converting a PHP string into a JSON array

Currently, I am working on making a cURL request and receiving a response that is in the following format when using var_dump: string(595) "{"user_id":1,"currency":"eur","purchase_packs":{"1":{"amount":500,"allowed_payment_methods":["ideal","paypal","visa ...

Vue: Develop a master component capable of displaying a sub-component

Is there a way to design a main component that is able to accept and display a subcomponent? Take the following scenario for instance: <Container> <Item/> <Item/> <SubMenu/> <Btn/> </Container> ...

I'm having trouble with the routing of a Node.js REST API built with Express and Mongoose

I am currently in the process of constructing a RESTful webservice by following a tutorial that can be found at: However, I have encountered an issue where it is returning a CANNOT GET/ reports error. Despite my efforts to troubleshoot and rectify the pro ...

Exploring TypeScript Module Importation and WebPack Integration

Struggling with WebPack's injection of imported dependencies for a TypeScript project. The first challenge is getting TypeScript to recognize the imported module. In the header.ts file, there is a declaration of a module nested under vi.input, export ...

What is the best way to retrieve an array that was created using the useEffect hook in React?

Utilizing the power of useEffect, I am fetching data from two different APIs to build an array. My goal is to access this array outside of useEffect and utilize it in the return statement below to render points on a map. However, when trying to access it ...

I'm encountering an issue where the same id is being passed to every function when I transfer it to the function parameter in a v-for cycle. What steps can I

When I pass the id parameter to the submitOrder function within a v-for loop, each function call with that parameter (id) ends up being the same every time. I'm puzzled as to why this is happening. <div v-for="order in orders"> <button ...

Urgent concern: the require function is being utilized in a manner that prevents the static extraction of dependencies [mysterious]

After implementing the magic-sdk version 8.0.1 on my project, I encountered the following warning message: warn - ./node_modules/magic-sdk/dist/es/index.js Critical dependency: require function is used in a way in which dependencies cannot be statically e ...

Navigating the screen reader with the cursor位

Site Design Challenge I recently discovered that the master/detail design of my website is not very accessible. The main view features a column chart where each column represents a different month. Clicking on one of these columns reveals details in a nes ...

The functionality of Ajax autocomplete with jQuery does not function properly when the text field contains existing text

Currently, I am utilizing Ajax autocomplete for jquery in my project. Below is the HTML code snippet I have implemented: <input type="text" name="autocomplete" id="globalBCCAutoComplete"> Furthermore, here is the JS code utilized for the autocomple ...

What is the process of sending a modified array as text to TextEdit?

As a beginner in JXA, I am currently learning how to perform simple tasks in TextEdit. I have managed to extract the paragraphs of a document and store them as an array using the following code: app = Application('TextEdit') docPars = app.docu ...

Dynamically Loading CSS files in a JQuery plugin using a Conditional Test

I'm trying to figure out the optimal way to dynamically load certain files based on specific conditions. Currently, I am loading three CSS files and two javascript files like this: <link href="core.min.css" rel="stylesheet" type="text/css"> & ...

implementing dynamic binding of image src paths to backend data in a vue js application

Is there a way to bind the image src path to backend data in Vue.js? I'm familiar with how to do it on the frontend using: <img :src="require(`@/assets/${item.image}`) But how can I achieve this with backend data? ...