From b41f94f4362375e99f227d6713479dee96a68426 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 9 May 2026 15:20:23 -0600 Subject: [PATCH] Cambio de multipart Axios --- app/Http/Controllers/ChatController.php | 2 +- nixpacks.toml | 2 +- resources/views/chat/show.blade.php | 79 ++++++++++++++----- .../update-profile-information-form.blade.php | 12 ++- 4 files changed, 71 insertions(+), 24 deletions(-) diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php index c04ff7e4..f460820a 100644 --- a/app/Http/Controllers/ChatController.php +++ b/app/Http/Controllers/ChatController.php @@ -69,7 +69,7 @@ class ChatController extends Controller $request->validate([ 'receiver_id' => 'required|exists:users,id', 'body' => 'nullable|string', - 'attachment' => 'nullable|file|max:20480', + 'attachment' => 'nullable|file|max:51200', ]); $receiver = User::findOrFail($request->receiver_id); diff --git a/nixpacks.toml b/nixpacks.toml index 37e48fbc..b61ca595 100644 --- a/nixpacks.toml +++ b/nixpacks.toml @@ -6,4 +6,4 @@ cmds = [ ] [start] -cmd = "mkdir -p storage/framework/sessions storage/framework/cache storage/framework/views && chmod -R 775 storage && php artisan storage:link --force && php artisan config:clear && php -d upload_max_filesize=50M -d post_max_size=55M artisan serve --host=0.0.0.0 --port=80" +cmd = "mkdir -p storage/framework/sessions storage/framework/cache storage/framework/views && chmod -R 775 storage && php artisan storage:link --force && php artisan config:clear && php -d upload_max_filesize=50M -d post_max_size=55M -d memory_limit=256M -d max_execution_time=120 artisan serve --host=0.0.0.0 --port=80" diff --git a/resources/views/chat/show.blade.php b/resources/views/chat/show.blade.php index 4aada1eb..5dfef981 100644 --- a/resources/views/chat/show.blade.php +++ b/resources/views/chat/show.blade.php @@ -123,29 +123,68 @@ function scrollBottom() { } scrollBottom(); -// preview archivo -document.getElementById('attachment').addEventListener('change', function() { - const name = this.files[0]?.name ?? ''; - document.getElementById('attachment-preview').textContent = name ? '📎 ' + name : ''; -}); +const MAX_ATTACHMENT_MB = 50; +const MAX_ATTACHMENT_BYTES = MAX_ATTACHMENT_MB * 1024 * 1024; -// enviar mensaje -document.getElementById('chat-form').addEventListener('submit', function(e) { - e.preventDefault(); - const form = this; - const data = new FormData(form); +const attachmentInput = document.getElementById('attachment'); +const chatForm = document.getElementById('chat-form'); - axios.post('{{ route("chat.send") }}', data, { - headers: { 'X-Socket-ID': window.Echo.socketId() } - }).then(response => { - appendMessage(response.data, true); - scrollBottom(); - form.reset(); - document.getElementById('attachment-preview').textContent = ''; - // Notificar al header que esta conversación ya fue respondida - window.dispatchEvent(new CustomEvent('chat:replied', { detail: { receiverId } })); +if (attachmentInput) { + attachmentInput.addEventListener('change', function() { + const file = this.files[0]; + if (!file) return; + if (file.size > MAX_ATTACHMENT_BYTES) { + document.getElementById('attachment-preview').innerHTML = + `El archivo supera el límite de ${MAX_ATTACHMENT_MB} MB.`; + this.value = ''; + return; + } + document.getElementById('attachment-preview').textContent = '📎 ' + file.name; }); -}); +} + +if (chatForm) { + chatForm.addEventListener('submit', function(e) { + e.preventDefault(); + const form = this; + const fileInput = document.getElementById('attachment'); + if (fileInput && fileInput.files[0] && fileInput.files[0].size > MAX_ATTACHMENT_BYTES) { + document.getElementById('attachment-preview').innerHTML = + `El archivo supera el límite de ${MAX_ATTACHMENT_MB} MB.`; + fileInput.value = ''; + return; + } + const data = new FormData(form); + + axios.post('{{ route("chat.send") }}', data, { + headers: { 'X-Socket-ID': window.Echo.socketId() }, + transformRequest: [(formData, headers) => { + delete headers.post['Content-Type']; + delete headers['Content-Type']; + return formData; + }] + }).then(response => { + appendMessage(response.data, true); + scrollBottom(); + form.reset(); + document.getElementById('attachment-preview').textContent = ''; + window.dispatchEvent(new CustomEvent('chat:replied', { detail: { receiverId } })); + }).catch(error => { + const preview = document.getElementById('attachment-preview'); + const status = error.response ? error.response.status : 0; + if (status === 413) { + preview.innerHTML = `El archivo es demasiado grande (máx. 50 MB).`; + } else if (status === 422) { + const errors = error.response.data.errors; + const msg = errors && errors.attachment ? errors.attachment[0] + : (errors && errors.receiver_id ? 'Error de sesión, recarga la página.' : 'Archivo no válido.'); + preview.innerHTML = `${msg}`; + } else { + preview.innerHTML = `Error al enviar. Intenta de nuevo.`; + } + }); + }); +} function buildAttachmentHtml(msg, isMine) { if (!msg.attachment) return ''; diff --git a/resources/views/profile/update-profile-information-form.blade.php b/resources/views/profile/update-profile-information-form.blade.php index 37950cf8..a0fcb404 100644 --- a/resources/views/profile/update-profile-information-form.blade.php +++ b/resources/views/profile/update-profile-information-form.blade.php @@ -72,10 +72,18 @@ wire:model.live="photo" x-ref="photo" x-on:change=" - photoName = $refs.photo.files[0].name; + const file = $refs.photo.files[0]; + if (!file) return; + const maxBytes = 50 * 1024 * 1024; + if (file.size > maxBytes) { + $refs.photo.value = ''; + alert('La foto supera el límite de 50 MB. Por favor elige una imagen más pequeña.'); + return; + } + photoName = file.name; const reader = new FileReader(); reader.onload = (e) => { photoPreview = e.target.result; }; - reader.readAsDataURL($refs.photo.files[0]); + reader.readAsDataURL(file); " />