Laravel Vue.js API: axios' PUT method doesn't send any data to controller

Question

I'm trying to update some data in Model using API in Laravel and Vue.js but I can't do this because axios doesn't send any data to server, I'm checking the data right before sending and they exist (I use FormData.append to add all fields)

I check data before sending using the code:

for(var pair of formData.entries()) {
   console.log(pair[0]+ ': '+ pair[1]); 
}

and I get this result:

You can check the appropriate code: [function for updating] updateStartup() {

            let formData = new FormData();
            formData.append('startup_logo', this.update_startup.startup_logo);
            formData.append('country_id', this.update_startup.country_id);
            formData.append('category_id', this.update_startup.category_id);
            formData.append('startup_name', this.update_startup.startup_name);
            formData.append('startup_url', this.update_startup.startup_url);
            formData.append('startup_bg_color', this.update_startup.startup_bg_color);
            formData.append('startup_description', this.update_startup.startup_description);
            formData.append('startup_public', this.update_startup.startup_public);

            axios.put('/api/startup/' + this.update_startup.id, formData, { headers: {
                    'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW',
                }
            })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error.response);
                });

        }

[controller method where I should receive data]:

 public function update(Request $request, $id) {

    return $request; // just for checking if I get data
    ...
 }

[HTML with vue.js where I use object which I send in updateStartup function]:

<!-- Modal edit -->
    <div class="modal fade editStartUp" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <img src="/admin/images/modal-cross.png" alt="Close">
                    </button>
                </div>
                <div class="modal-body">

                    <form method="POST" enctype="multipart/form-data" @submit.prevent="updateStartup">
                        <h4 class="sel-c-t">Select category</h4>

                        <div class="submit-fields-wr">
                            <select name="category" v-model="update_startup.category_id" class="selectpicker select-small" data-live-search="true" @change="updateCategoryDetails()">
                                <option v-for="category in categories" :value="category.id" :selected="category.id == update_startup.category_id ? 'selected' : ''" >{{ category.name }}</option>
                            </select>

                            <select v-if="update_startup.is_admin" name="country" v-model="update_startup.country_id" class="selectpicker select-small" data-live-search="true" @change="updateCountryDetails()">
                                <option v-for="country in countries" :value="country.id" :selected="country.id == update_startup.country_id ? 'selected' : '' ">{{country.name }}</option>
                            </select>
                        </div>

                        <div class="submit-fields-wr">
                            <input type="text" placeholder="Startup name" v-model="update_startup.startup_name">
                            <input type="url" v-model="update_startup.startup_url" placeholder="URL">
                        </div>

                        <textarea v-model="update_startup.startup_description" name="startup_description" placeholder="Describe your startup in a sentence.">

                        </textarea>

                        <div v-if="!update_startup.is_admin">
                            <h4 class="sel-c-t bold">Contact details:</h4>

                            <div class="submit-fields-wr">
                                <select name="country" v-model="update_startup.country_id" class="selectpicker select-small" data-live-search="true" @change="updateCountryDetails()">
                                    <option v-for="country in countries" :value="country.id" :selected="country.id == update_startup.country_id ? 'selected' : '' ">{{country.name }}</option>
                                </select>
                                <input type="text" placeholder="Your Name" v-model="update_startup.contact_name">
                            </div>

                            <div class="submit-fields-wr">
                                <input type="text" v-model="update_startup.contact_phone" placeholder="Your phone number">
                                <input type="email" v-model="update_startup.contact_email" placeholder="Your email address">
                            </div>
                        </div>


                        <p class="upl-txt">Company’s logo.<span>(upload as a png file, less than 3mb)</span></p>

                        <div class="file-upload">
                            <div class="logo-preview-wr">
                                <div class="img-logo-preview">
                                    <img :src="update_startup.startup_logo" alt="logo preview" id="img_preview">
                                </div>
                            </div>

                            <label for="upload" class="file-upload_label">Browse</label>
                            <input id="upload" @change="onFileUpdated" class="file-upload_input" type="file" name="file-upload">
                        </div>

                        <div class="preview-divider"></div>

                        <h4 class="sel-c-t bold">Preview:</h4>

                        <div class="preview-wrapper-row">

                            <a href="#" class="start-up-wr">
                                <div class="start-up-part-1 edit">
                                    <div class="flag-cat-wr">
                                        <div class="flag-wr">
                                            <img :src="update_startup.country_flag" :alt="update_startup.country_name">
                                        </div>
                                        <div class="category-wr">
                                            {{ update_startup.category_name }}
                                        </div>
                                    </div>
                                    <img :src="update_startup.startup_logo" :alt="update_startup.startup_name" class="start-up-logo">
                                </div>
                                <div class="start-up-part-2">
                                    <h4 class="startup-name">{{ update_startup.startup_name }}</h4>
                                    <p class="startup-description">
                                        {{ update_startup.startup_description }}
                                    </p>
                                </div>
                            </a>

                            <div class="color-picker-btns-wr">

                                <div>
                                    <input type="text" class="color_picker" v-model="update_startup.startup_bg_color">
                                    <button class="colo_picker_btn">Background Color</button>
                                </div>

                                <div class="modal-bottom-btns">
                                    <div class="btn-deactivate-active">
                                        <button type="submit" class="btn-deactivate" @click="deactivateExistingStartup()">Deactivate</button>
                                        <button type="submit" class="btn-activate" @click="activateExistingStartup()">Activate</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <!-- Modal edit -->

[Additional info - also when I open modal(where I have form for updating) I change form data accordingly to startup id]:

showUpdateStartup(startup) {

            setTimeout(() => {
                $('.selectpicker').selectpicker('refresh');
            }, 50);

            this.update_startup.id = startup.id;
            this.update_startup.category_id = startup.category.id;
            this.update_startup.category_name = startup.category.name;
            this.update_startup.startup_name = startup.name;
            this.update_startup.startup_description = startup.description;
            this.update_startup.startup_url = startup.url;
            this.update_startup.startup_logo = startup.logo;
            this.update_startup.startup_bg_color = startup.startup_bg_color;
            this.update_startup.contact_id = startup.contact.id;
            this.update_startup.contact_name = startup.contact.name;
            this.update_startup.contact_phone = startup.contact.phone;
            this.update_startup.contact_email = startup.contact.email;
            this.update_startup.country_id = startup.contact.country.id;
            this.update_startup.country_flag = startup.contact.country.flag;
            this.update_startup.country_name = startup.contact.country.name;
            this.update_startup.is_admin = startup.contact.is_admin;
            this.update_startup.startup_public = startup.public;
        },

Let me know if you have any additional questions

Thank you guys a lot for any help and ideas!

does a console.log(formData) just before the axios call show the expected results? — whmkr
– whmkr, Commented Sep 27, 2018 at 18:22
it shows expected results, but I use this code for showing: code for(var pair of formData.entries()) { console.log(pair[0]+ ': '+ pair[1]); } code — Taras Chernata
– Taras Chernata, Commented Sep 27, 2018 at 18:35

Bond77 · Accepted Answer · 2018-09-28 10:39:07Z

9

Try using formData.append('_method', 'PATCH') with axios.post method.

answered Sep 28, 2018 at 10:39

Bond77

1763 bronze badges

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

5 Comments

Taras Chernata Over a year ago

I tried this but no result, I tried to add PATCH and PUT (also I tried to make axios post request with those PATCH and PUT in form data)

Taras Chernata Over a year ago

I think I do smth wrong when submit data in axios, but I don't know what exactly ) there's field with file uploading and that is why all is more difficult than usually )

Taras Chernata Over a year ago

Man! Thank you a lot! now I understand what is problem (it's just a bug in Laravel) to fix the problem I should have add formData.append('_method', 'PUT') and also, off course we should have appropriate route for this (Route::put('api/startup', 'Admin\StartupController@update') in my case)

Bond77 Over a year ago

Happy to hear that!

Maddy Over a year ago

Thank you so much @Bond77, I was also facing the same problem... My data was not able to reach at backend in Laravel and my validator throwing errors and null value was passing, however by you suggestion my data is not properly going in database, Thanks again !!!

whmkr · Accepted Answer · 2018-09-27 19:14:13Z

1

Return the input data instead of the Request object from your controller:

return $request->input();

edited Sep 27, 2018 at 19:14

answered Sep 27, 2018 at 18:39

whmkr

3,0952 gold badges23 silver badges32 bronze badges

5 Comments

whmkr Over a year ago

hmm... $request->all() ??

Taras Chernata Over a year ago

exactly the same :| there is a route but don't think it'll help: code // update startup Route::put('api/startup/{id}', 'Admin\StartupController@update'); code

whmkr Over a year ago

put a return ['test' => 'ing123']; in your update method real quick just to make sure it's actually hitting that method and responding from there

whmkr Over a year ago

I'm confident you'll at least want to return the $request->input() to see the data passed in, beyond that I'm not sure what else is going wrong at this point.

Taras Chernata Over a year ago

Thank you Wheelmaker for ideas ) )

Collectives™ on Stack Overflow

Laravel Vue.js API: axios' PUT method doesn't send any data to controller

2 Answers 2

5 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related