Cambio de multipart Axios

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);

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"

resources/views/chat/show.blade.php

@@ -123,29 +123,68 @@ function scrollBottom() {
 }
 scrollBottom();
 
-// preview archivo
+const MAX_ATTACHMENT_MB = 50;
-document.getElementById('attachment').addEventListener('change', function() {
+const MAX_ATTACHMENT_BYTES = MAX_ATTACHMENT_MB * 1024 * 1024;
-    const name = this.files[0]?.name ?? '';
-    document.getElementById('attachment-preview').textContent = name ? '📎 ' + name : '';
-});
 
-// enviar mensaje
+const attachmentInput = document.getElementById('attachment');
-document.getElementById('chat-form').addEventListener('submit', function(e) {
+const chatForm = document.getElementById('chat-form');
-    e.preventDefault();
-    const form = this;
-    const data = new FormData(form);
 
-    axios.post('{{ route("chat.send") }}', data, {
+if (attachmentInput) {
-        headers: { 'X-Socket-ID': window.Echo.socketId() }
+    attachmentInput.addEventListener('change', function() {
-    }).then(response => {
+        const file = this.files[0];
-        appendMessage(response.data, true);
+        if (!file) return;
-        scrollBottom();
+        if (file.size > MAX_ATTACHMENT_BYTES) {
-        form.reset();
+            document.getElementById('attachment-preview').innerHTML =
-        document.getElementById('attachment-preview').textContent = '';
+                `<span class="text-danger"><i class="fas fa-exclamation-circle mr-1"></i>El archivo supera el límite de ${MAX_ATTACHMENT_MB} MB.</span>`;
-        // Notificar al header que esta conversación ya fue respondida
+            this.value = '';
-        window.dispatchEvent(new CustomEvent('chat:replied', { detail: { receiverId } }));
+            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 =
+                `<span class="text-danger"><i class="fas fa-exclamation-circle mr-1"></i>El archivo supera el límite de ${MAX_ATTACHMENT_MB} MB.</span>`;
+            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 = `<span class="text-danger"><i class="fas fa-exclamation-circle mr-1"></i>El archivo es demasiado grande (máx. 50 MB).</span>`;
+            } 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 = `<span class="text-danger"><i class="fas fa-exclamation-circle mr-1"></i>${msg}</span>`;
+            } else {
+                preview.innerHTML = `<span class="text-danger"><i class="fas fa-exclamation-circle mr-1"></i>Error al enviar. Intenta de nuevo.</span>`;
+            }
+        });
+    });
+}
 
 function buildAttachmentHtml(msg, isMine) {
     if (!msg.attachment) return '';

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);
                         " />
 
                     <label class="form-label fw-bold mb-3">Foto de perfil</label>