The Axios controller sends form data and retrieves an object as the response

//Vuejs2 //Laravel v7.x

I have hit a roadblock and cannot seem to find a solution. I am trying to retrieve data from my object in the controller. In my View.vue file, I am using axios to make a post request.

     data() {
        return {
          customer: {
             name: 'abc',
             login: 'def'
          },
          file: null
        }
    },methods: {
        submit(){
            let formData = new FormData();
            formData.append("customer", this.customer);
            formData.append("file", this.file);

            axios.post('/project/new',
                        formData, {
                            headers: {
                                "Content-Type": "multipart/form-data"
                            }
                        }).then(data => {
                        console.log(data.data);
                    });
        }
    }

In my controller, I am attempting to handle the data like this:

public function postProject(Request $request)
{
    return $request->customer;  //return [Object Object]
    return $request->customer->name;  //return Trying to get property 'name' of non-object
    return $request->customer['name']; //return Illegal string offset 'name'
    return $request->file;  //return [Object Object]
}

Thank you for any assistance provided. Have a great day!

Answer №1

Attempting to use .append to insert objects into your FormData will not work as expected.

Upon reviewing information available at https://developer.mozilla.org/en-US/docs/Web/API/FormData/append, it is clear that the method specifically accepts a USVString or Blob as the value. Any other data types are automatically converted to a String representation.

In Javascript, the string rendering of a typical object appears as [object Object].

To address this issue, consider using JSON.stringify(this.customer) in order to convert the object into its JSON format.

Answer №2

Consider using either $request->get('client') or $request->input('client')

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

What is the best way to simultaneously check two conditions in Vue.js?

In my current scenario, I am facing a challenge with checking both conditions simultaneously. If an attachment exists in the request but the attachment field does not exist in the form, it should display a message in the modal. Similarly, if body text exis ...

Troubleshooting: Dealing with Stack Overflow Error when using setInterval in Vue Programming

I am facing a stack overflow error while creating a timer using Vue, and I'm struggling to understand the root cause. Can someone provide insights on the following code: Here is my template structure: <span class="coundown-number"> { ...

Updating ES6 syntax for superset in array: a step-by-step guide

I am currently working with ES6 React code that generates an array of MiniIcons on a webpage. const MiniIcons = ({miniicons}) => ( <div id="application"> {miniicons.map(miniicon => ( <MiniIcon key={miniicon.id} id={miniicon.id} ...

Press on the button that is currently in your field of view

I have a web page with multiple buttons inside div elements. I am looking to automate the process of clicking the "Buy" button that is currently visible on the screen when the user presses the B key. $(document).keydown(function(e) { if (e.keyCode == ...

Tips on utilizing a function that was generated within the constructor

I'm currently in the process of developing a function within the constructor, and it is essential that this function be placed inside the constructor. I am interested in implementing a button to trigger this function from an external source, but unfor ...

Combining JSON objects within an array

I'm working with a JSON Array that looks like this: [ {"Name" : "Arrow", "Year" : "2001" }, {"Name" : "Arrow", "Type" : "Action-Drama" }, { "Name" : "GOT", "Type" : "Action-Drama" } ] and I want to convert it to look like this: [ { "Name" : ...

Finding the exact time zone utilizing AngularJS

Is it possible to retrieve the PC's Time Zone using Angular? I specifically need the timezone in the format of '+H:MM' for manipulation. I know that Angular typically formats time zones as '+HHMM', so my goal is to store this time ...

Error: It seems that the window object is not defined when trying to run Firebase analytics

Encountering the error ReferenceError: window is not defined when attempting to set up Firebase analytics in my Next.js project. Below is the code snippet causing the issue: const app = initializeApp(firebaseConfig); const auth = getAuth(app); let analyti ...

Steps to send input value from HTML to JavaScript for dynamically switching between cases with different functions

I have encountered an issue with two different files where the JavaScript file is referenced from an HTML page. Upon running the code, only the default case for the switch statement is executed and not the other cases. THIS IS THE JAVASCRIPT FILE. var ...

Using jQuery in a React project to enhance Bootstrap functionality

Currently, I am working on a React.js project where instead of utilizing React-Bootstrap, I have decided to incorporate Bootstrap's CSS directly into my project. Now, I find myself in need of importing jQuery in order to fully utilize features such as ...

Is it possible to utilize React hooks within a conditional statement?

My current situation involves an object serving as a state, complete with various properties. Now, I am looking to update this state within a specific condition using a hook. However, this update seems to trigger an infinite loop. The question at hand is ...

What are some alternatives if slowAES isn't functioning properly with CBC/PKCS7?

Is there a way to encrypt data in javascript using CBC/PKCS7 so that it can be decrypted in php or .NET? I've experimented with slowAES, but the encrypted output doesn't seem to be correct. When I compare slowAES and .NET encryption using the s ...

Clicking on the Material-UI slider that uses multiple useState causes duplication issues

Seeking help to develop a font size and font weight previewer utilizing Material-Ui sliders and useState. Encountering an issue where clicking the first slider after the second results in duplicating the first slider. https://i.sstatic.net/5MAzgtHO.png B ...

Executing JavaScript when a specific portion of a webpage loads in the presence of AJAX: A guide

As I tackle a project that involves loading elements via AJAX within a CMS-type software, I find myself restricted in accessing the AJAX code and its callbacks. One specific challenge I face is running my function only when a certain part of the page is l ...

Utilizing Raycaster for modifying the Box's face color upon clicking

I've been experimenting with the raycaster in order to select faces of cubes that are created, and then change the color of the clicked face. So far, I've managed to make it work for selecting entire objects, but not individual faces of those obj ...

When React JS and PHP(Mysql) combine, the error message "records.map is not a function" may appear

What problem am I facing with my code? The issue lies in my JavaScript code while trying to display the JSON array fetched correctly by the PHP file. The JavaScript implementation of JSON in the state is accurate, but an error occurs when attempting to us ...

PHP while loops that result in an never-ending loading loop

I am attempting to upload an image and some alphanumeric characters using AJAX. The code seems to be functioning correctly (i.e., all data is being successfully stored in the database) except for a crucial issue. I need the "character" variable to be uniqu ...

Maximum opacity in Three.js fog

My Current Endeavor: I am in the process of developing a lightweight GIS application with topography. One feature I want to implement is atmosphere haze. The Code I'm Working With: (Please bear with me as I have multiple scenes) fogColor = new T ...

Steps to display a table upon clicking the submit button in a form

I am currently in the process of developing a project that will showcase a teacher's timetable when the user inputs their faculty ID. I am aiming to have the table displayed only after the user clicks the submit button, rather than presenting an empty ...

Accessing composable variables in Vue 3 without having to redefine refs from within a function

Currently, I am implementing a parent companyList component along with a reusable Table component and an useFetch composable in vue 3.2. Prior to integrating the Table component, my code looked like this: companyList <script setup> import { com ...