The patch method is failing to upload using axios

In my project using Laravel 5.8 and Vue.js 2, I have encountered a problem with the .vue file:

let formData = new FormData();                           
formData.append('name', this.name);
formData.append('image',this.image)
formData.append('_method', 'PATCH');
axios.patch('/url/' + this.id, formData)                        
                     .then(({data}) => {                

                    })
                     .catch((error) => {

                    }); 

Route

Route::patch('/url/{id}', 'CarsController@update');

Error

I am receiving an error message: Integrity constraint violation: 1048 Column 'name' cannot be null.

Interestingly, when I change the method to POST in both my vue file and web.php, it seems to work fine. However, I need to use both methods - POST for new data and PATCH for updating existing data. How can I resolve this issue?

Answer №1

When using the HTTP `patch` method, it is important to note that it does not support sending data in the form of `FormData`. In such cases, you have two options: either send a JSON request or change your route method to `post`. Alternatively, if using the `patch` method is necessary, you can make use of `axios.post` with an additional attribute `_method: 'patch'` which allows for handling `FormData` requests.

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

Creating dynamic rows for Firebase data in React BootstrapTable can be accomplished by dynamically rendering each row

Hey everyone, I'm currently working on a web app project where I am creating a table. Below is the code snippet for it: class Table1 extends Component { render() { return ( <div> <BootstrapTable data={this.props.data}> ...

Guide for utilizing a table value as a parameter in a mySQL query with PHP

My website features an HTML table that is filled with data pulled from a mySQL table using PHP. Each row in the table is clickable, and when clicked, it opens a modal that contains a form to update and submit data back to the database using a mysql update ...

Modifying the value of an element in an array of state variables

I currently have an array of objects stored as a state variable. My goal is to create a function that can modify a specific field within one of the objects. interface IItem{ id: string, selected: boolean } const [array, setArray] = useState<IItem[]&g ...

UI not getting updated due to synchronous jQuery ajax call

I am currently facing an issue with my synchronous ajax call executed in a loop. Despite trying to update the UI before each ajax call and on the done callback method, the UI does not update until all ajax calls have been completed. Below is my code snip ...

How can I turn off the ToggleButton?

Currently, I am utilizing a ToggleButtonGroup in my task list to categorize my input as either today, tomorrow, this week, or no date. If none of the buttons are toggled, the tasks will be placed under 'no date', otherwise they will fall into one ...

What is the procedure to change a matter body's isStatic property to false in matter.js upon pressing a key?

During my recent project, I encountered a challenge in trying to set the isStatic property of a Matter Body in matter.js to false when a key is pressed. if (keyIsPressed(UP_ARROW)) { this.body.isStatic(false) } Could you provide guidance on the correct ...

Using Jquery and css to toggle and display active menu when clicked

I am trying to create a jQuery dropdown menu similar to the Facebook notification menu. However, I am encountering an issue with the JavaScript code. Here is my JSFiddle example. The problem arises when I click on the menu; it opens with an icon, similar ...

clear the input field of any entered text type

Just starting out with Javascript! Below is some code: This code is taken directly from the HTML page <form action="#" id="ToolKeywordSearch"> <input type="text" class="ProductFinderText" id="ToolSearchField"onblur="if(this.value==& ...

Problem encountered when attempting to use 'delete' as a property name

I am currently encountering an issue with a form that deletes a gallery from a database. Previously, the code was functioning properly but after some recent updates such as switching from jquery.interface to jquery-ui, I am now facing difficulties. Wheneve ...

Tips for locating two values within an array in a Meteor document

In my MongoDB collection, I have documents that contain an object called alltags, which is an array of strings. I know how to search for a specific string within these arrays using collection.find({alltags:"searchstring"}), but I'm unsure of how to se ...

`How can I utilize typeahead.js to easily read JSON data?`

Looking to utilize JSON file data with typeahead.js for your project? Check out this link. With typeahead.js, users can input a word like "EnglishWords [Best]" and receive a list of all words similar to or starting with "best". Upon selection, the descrip ...

Implementing react-table version 7 to display dynamic columns and rows fetched from a JSON dataset via an API

Just starting out with react and I have a json api that needs to be displayed as a table on the client side. My plan is to use react-table v7. This is my approach: Use the keys from the data as column Headers and Accessor The json data will be the rows I ...

Activating Vue.js reactivity by introducing a new key into an object

One way to add a new key/value pair to an object is by using the following function: .then(response => { this.plantRegisteredMaterials = response.data.tenantPlantMaterials.edges; this.plantRegister ...

Transferring data to parent component in React Native

Task Management Challenge In my current project, I am faced with a task management challenge. The parent component holds an array of tasks using the useState hook. Each task is then displayed in a child component along with a delete button for each indivi ...

CSS3 Transition effects are applied immediately to duplicated elements

My dilemma lies in applying CSS3 Transitions to elements by introducing a new class. Markup <div id="parent"> <div class="child"> </div> </div> CSS .child { background: blue; -webkit-transition: background 4s; ...

Are there any jQuery plugins available that animate elements as the page is scrolled?

Looking for a library that can create entry animations for elements as the page is scrolled? I previously used the animate it library, which was great - lightweight and easy to use. However, it doesn't seem compatible with the latest jQuery version (3 ...

Understanding the Contrast between Relative Paths and Absolute Paths in JavaScript

Seeking clarification on a key topic, Based on my understanding, two distinct paths exist: relative and absolute. Stricly relative: <img src="kitten.png"/> Fully absolute: <img src="http://www.foo.com/images/kitten.png"> What sets apart R ...

Integrate Javascript Chart into Your Rails Application

As a newcomer to Rails, I am attempting to incorporate a JavaScript chart from Highcharts.com into my Rails application. However, I have encountered an issue where the view container remains empty. I have downloaded the package and added it to vendor/asse ...

Seeking the method to fetch the title of a page using JavaScript?

Can anyone explain what the function "$.request("fetch_title", { url: c })" does in this JavaScript code snippet I found online? It seems to be related to retrieving the title of a remote webpage. function fetch_title() { var a = $("#url-field"), b ...

Enable the use of multiple decimal separators in a ReactJS application

I am currently developing a small project that involves using a POST request, which requires multiple fields with 2 float values. My backend system expects the decimal separator to be a ".", but my target audience is primarily French and they ar ...