Hello my friends i have a probleme: in my Laravel application where the update operation appears to succeed based on the response message, but no changes are actually reflected in the database.
this is the code of the controller:
public function update(Request $request, $id)
{
$request->validate([
'changeName' => 'string|max:255',
'file' => 'file|mimes:pdf,doc,docx|max:2048',
]);
$changeRequest = ChangeRequest::find($id);
$changeRequest->change_name = $request->input('changeName');
// Gestion des fichiers
if ($request->hasFile('file')) {
foreach ($request->file('file') as $file) {
$filePath = $file->store('change_requests');
$changeRequest->file_name = $filePath; // Mettez à jour le champ file_name si vous le souhaitez
}
}
$changeRequest->save();
return response()->json(['message' => 'Change request updated successfully.']);
}
and the the code of react:
const handleSubmit = async (e) => {
e.preventDefault(); // Empêche le rechargement de la page
console.log('Change Name:', changeName); // Ajoutez cette ligne
try {
const formData = new FormData();
formData.append('change_name', changeName); // currentChangeName est la valeur actuelle du champ
files.forEach((file) => {
formData.append('files[]', file);
});
// Envoyer la requête PUT à l'API
await axiosClient.put(`/change-requests/${requestId}`, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
// Redirection après la mise à jour
navigate("/projectsList");
} catch (error) {
console.error('Error updating change request:', error);
setGlobalError('Error updating change request.'); // Afficher l'erreur
}
};
and this is the form
<form method="POST" onSubmit={handleSubmit}>
<div className="justify-center items-center p-6 ">
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
<div className="relative p-6 flex-auto">
<label htmlFor="projectName" className="block text-sm font-medium leading-6 text-gray-900">
Project Name
</label>
<div className="mt-2">
<input
id="projectName"
name="projectName"
type="text"
autoComplete="projectName"
placeholder="Project Name"
className="block w-full rounded-md border-0 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6"
value={projectName}
onChange={(e) => setProjectName(e.target.value)}
readOnly
/>
{projectNameError && <div className="text-red-500 text-sm mt-1">{projectNameError}</div>}
</div>
<label htmlFor="ChangeName" className="block text-sm font-medium leading-6 mt-2 text-gray-900">
Change Request Name
</label>
<div className="mt-2">
<input
id="changeName"
name="changeName"
type="text"
placeholder='Change Request Name'
className="block w-full rounded-md border-0 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6"
value={changeName}
onChange={(e) => setChangeName(e.target.value)}
/>
{changeNameError && <div className="text-red-500 text-sm mt-1">{changeNameError}</div>}
</div>
<label htmlFor="File" className="block text-sm font-medium leading-6 mt-2 text-gray-900">
Upload File
</label>
<div
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
onDragOver={handleDragOver}
onDrop={handleDrop}
style={{
border: '3px dashed',
borderColor: dragging ? '#2196f3' : '#cccc',
padding: '20px',
borderRadius: '5px',
transition: 'border-color 0.3s ease',
cursor: 'pointer',
}}
className="flex items-center justify-center mt-6">
<div className="flex flex-col items-center justify-center text-center">
<ArrowUpTrayIcon className="h-7 w-7 text-blue-500" aria-hidden="true" />
<label htmlFor="fileInput" className="text-blue-500 flex flex-col items-center justify-center ">
Click to upload
<input type="file" id="fileInput" onChange={handleFileInputChange} className="hidden" multiple accept=".doc, .docx, .pdf" />
</label>
Or drag & drop files here
</div>
</div>
{files.length > 0 && (
<div>
<ul className="mt-2 mb-0 w-64 px-3 py-3.5 rounded-md bg-slate-200 space-y-3">
{files.map((file, index) => (
<li key={index} className="flex items-center">
<DocumentIcon className="h-10 w-10 mr-2 text-amber-500" aria-hidden="true" />
<div className="flex flex-grow justify-between items-center">
<div className="text-xs font-medium text-gray-500">{file.name}</div>
</div>
<button onClick={() => handleRemoveFile(index)} className="text-gray-500 hover:text-gray-900 focus:outline-none" aria-label="Remove file">
<span className="material-icons">x</span>
</button>
</li>
))}
</ul>
</div>
)}
{fileError && <div className="text-red-500 text-sm mt-1">{fileError}</div>}
{globalError && <div className="text-red-500 text-sm mt-1" dangerouslySetInnerHTML={{ __html: globalError }} />}
</div>
<div className="flex items-center justify-end p-6">
<Link to={`/projects/${projectId}/change-requests`}>
<button
className="text-gray-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="submit"
onClick={() => navigate(-1)}
>
Cancel
</button>
</Link>
<button type="submit" className="bg-blue-950 text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150">
Modify
</button>
</div>
</div>
</div>
</form>
and this is the model code :
class ChangeRequest extends Model
{
use HasFactory;
/**
* The attributes that are mass assignable.
*
* @var array<int, string>
*/
protected $fillable = [
'project_name',
'change_name',
'file_name',
'user_id',
'start_at',
'end_at',
'link',
'status',
];
any solution