Cambio de multipart Axios

2026-05-09 15:20:23 -06:00
parent 2d51c8f558
commit b41f94f436
4 changed files with 71 additions and 24 deletions
@@ -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 =
+                `<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>`;
+            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 =
+                `<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 '';
@@ -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>