Estoy creando una aplicación de blogs con Laravel 8 y Bootstrap 5. Tiene un sistema de gestión de perfiles de usuario.
Quiero permitir que todos los usuarios agreguen y eliminen su avatar . Para este propósito, tengo un método deleteavatar() en mi controlador UserController :
public function deleteavatar($id, $fileName) { $current_user = Auth::user(); $current_user->avatar = "default.png"; $current_user->save(); if (File::exists(public_path('images/avatars/' . $fileName))) { File::delete(public_path('images/avatars/' . $fileName)); } }En el archivo de rutas:
Route::group(['prefix' => 'user'], function() { Route::get('/', [UserController::class, 'index'])->name('user'); Route::match(['get', 'post'],'/update', [UserController::class, 'update'])->name('user.update'); Route::post('/deleteavatar/{id}/{fileName}', [UserController::class, 'deleteavatar'])->name('user.deleteavatar'); });Uso esta pieza de JavaScript para llamar al método anterior:
function deleteAvatar(e) { e.preventDefault(); var avatar = document.querySelector('#avatar-container img'); var topAvatar = document.querySelector('#top_avatar'); var trashIcon = e.currentTarget; var defaultAvatar = APP_URL + '/images/avatars/default.png'; //Get user's ID var id = trashIcon.dataset.uid; var fileName = avatar.getAttribute('src').split('/').reverse()[0]; var url = APP_URL + `/dashboard/user/deleteavatar/${id}/${fileName}`; if (confirm('Delete the avatar?')) { var CSRF_TOKEN = document.querySelectorAll('meta[name="csrf-token"]')[0].getAttribute('content'); var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == XMLHttpRequest.DONE) { if (xmlhttp.status == 200) { avatar.setAttribute('src', defaultAvatar); topAvatar.setAttribute('src', defaultAvatar); trashIcon.remove(); } } } xmlhttp.open('POST', url, true); xmlhttp.send(); } } document.querySelector('#delete-avatar').addEventListener('click', deleteAvatar); Por una razón que no he podido averiguar, la consola de Chrome arroja este 419 (unknown status) .
Laravel está devolviendo el estado http 419 debido a que falta el token csrf. Agregue el token csrf en una meta HTML y agréguelo también a su encabezado de solicitud ajax.
Para referencia: https://laravel.com/docs/8.x/csrf#csrf-x-csrf-token
establecer el encabezado xmlhttp para el token csrf
function deleteAvatar(e) { e.preventDefault(); var avatar = document.querySelector('#avatar-container img'); var topAvatar = document.querySelector('#top_avatar'); var trashIcon = e.currentTarget; var defaultAvatar = APP_URL + '/images/avatars/default.png'; //Get user's ID var id = trashIcon.dataset.uid; var fileName = avatar.getAttribute('src').split('/').reverse()[0]; var url = APP_URL + `/dashboard/user/deleteavatar/${id}/${fileName}`; if (confirm('Delete the avatar?')) { var CSRF_TOKEN = document.querySelectorAll('meta[name="csrf-token"]')[0].getAttribute('content'); var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == XMLHttpRequest.DONE) { if (xmlhttp.status == 200) { avatar.setAttribute('src', defaultAvatar); topAvatar.setAttribute('src', defaultAvatar); trashIcon.remove(); } } } xmlhttp.open('POST', url, true); xmlhttp.setRequestHeader("X-CSRF-TOKEN", CSRF_TOKEN); xmlhttp.send(); } } document.querySelector('#delete-avatar').addEventListener('click', deleteAvatar);Referencia: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader
Referencia: https://laravel.com/docs/9.x/csrf