- ${msg.content || msg.message_text || '[Mensaje vacío]'}
+ ${content}
${time}
${msg.direction === 'outgoing' ? `
${statusIcon}` : ''}
@@ -705,12 +826,221 @@
item.style.display = matches ? 'flex' : 'none';
});
}
+
+ // ========== FUNCIONES MULTIMEDIA ==========
+
+ handleFileSelect(event) {
+ const file = event.target.files[0];
+ if (!file) return;
+
+ // Validar tamaño
+ const maxSize = this.getMaxFileSize(file.type);
+ if (file.size > maxSize) {
+ alert(`El archivo es demasiado grande. Máximo: ${(maxSize / 1024 / 1024).toFixed(0)}MB`);
+ return;
+ }
+
+ // Mostrar preview
+ this.showMediaPreview(file);
+ }
+
+ getMaxFileSize(fileType) {
+ if (fileType.startsWith('image/')) return 5 * 1024 * 1024; // 5MB
+ if (fileType.startsWith('application/')) return 100 * 1024 * 1024; // 100MB
+ return 16 * 1024 * 1024; // 16MB para video/audio
+ }
+
+ showMediaPreview(file) {
+ const preview = document.getElementById('media-preview');
+ const thumbnail = document.getElementById('preview-thumbnail');
+ const filename = document.getElementById('preview-filename');
+ const filesize = document.getElementById('preview-filesize');
+
+ // Establecer información del archivo
+ filename.textContent = file.name;
+ filesize.textContent = this.formatFileSize(file.size);
+
+ // Mostrar thumbnail para imágenes
+ if (file.type.startsWith('image/')) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ thumbnail.src = e.target.result;
+ thumbnail.style.display = 'block';
+ };
+ reader.readAsDataURL(file);
+ } else {
+ thumbnail.style.display = 'none';
+ }
+
+ // Guardar archivo temporalmente
+ this.selectedFile = file;
+
+ // Mostrar preview
+ preview.style.display = 'block';
+
+ // Cambiar comportamiento del botón enviar
+ const sendBtn = document.getElementById('send-btn');
+ const originalHandler = sendBtn.onclick;
+ sendBtn.onclick = () => this.sendMediaMessage();
+ }
+
+ formatFileSize(bytes) {
+ if (bytes === 0) return '0 Bytes';
+ const k = 1024;
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+ }
+
+ async sendMediaMessage() {
+ if (!this.selectedFile || !this.currentUserId) return;
+
+ const caption = document.getElementById('media-caption').value.trim();
+ const sendBtn = document.getElementById('send-btn');
+ const attachBtn = document.getElementById('attach-btn');
+
+ // Deshabilitar botones
+ sendBtn.disabled = true;
+ attachBtn.disabled = true;
+ sendBtn.innerHTML = '
';
+
+ try {
+ // 1. Subir archivo
+ const formData = new FormData();
+ formData.append('file', this.selectedFile);
+
+ const uploadResponse = await fetch('api/upload_media.php', {
+ method: 'POST',
+ body: formData
+ });
+
+ const uploadResult = await uploadResponse.json();
+
+ if (!uploadResult.success) {
+ throw new Error(uploadResult.error || 'Error subiendo archivo');
+ }
+
+ // 2. Enviar mensaje con el archivo
+ const user = this.conversations.find(c => c.user_id === this.currentUserId);
+ const phone = user ? user.phone_number : null;
+
+ if (!phone) {
+ throw new Error('No se encontró el número de teléfono');
+ }
+
+ const sendResponse = await fetch('api/send_media_message.php', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ recipient: phone,
+ media_url: uploadResult.data.url,
+ media_type: uploadResult.data.type,
+ caption: caption || null,
+ filename: this.selectedFile.name
+ })
+ });
+
+ const sendResult = await sendResponse.json();
+
+ if (!sendResult.success) {
+ throw new Error(sendResult.error || 'Error enviando mensaje');
+ }
+
+ // Éxito
+ this.cancelMediaUpload();
+ await this.loadMessages(this.currentUserId, false);
+ this.loadConversations();
+
+ } catch (error) {
+ console.error('Error sending media:', error);
+ alert('Error al enviar archivo: ' + error.message);
+ } finally {
+ sendBtn.disabled = false;
+ attachBtn.disabled = false;
+ sendBtn.innerHTML = '
';
+ }
+ }
+
+ cancelMediaUpload() {
+ document.getElementById('media-preview').style.display = 'none';
+ document.getElementById('media-caption').value = '';
+ document.getElementById('file-input').value = '';
+ this.selectedFile = null;
+
+ // Restaurar botón enviar
+ const sendBtn = document.getElementById('send-btn');
+ sendBtn.onclick = null;
+ }
+
+ renderMediaMessage(message) {
+ if (!message.media_url) return '';
+
+ const mediaType = message.message_type;
+ const mediaUrl = message.media_url;
+ const caption = message.content;
+
+ switch (mediaType) {
+ case 'image':
+ return `
+
+ ${caption ? `
${caption}
` : ''}
+ `;
+
+ case 'video':
+ return `
+
+
+
+ ${caption ? `
${caption}
` : ''}
+ `;
+
+ case 'audio':
+ return `
+
+ `;
+
+ case 'document':
+ return `
+
+
+
+
${caption || 'Documento'}
+
Haz clic para descargar
+
+
+
+ `;
+
+ default:
+ return caption || '';
+ }
+ }
+ }
+
+ // Función global para cancelar
+ function cancelMediaUpload() {
+ if (window.chatApp) {
+ window.chatApp.cancelMediaUpload();
+ }
}
// Inicializar cuando la página cargue
let chat;
document.addEventListener('DOMContentLoaded', () => {
chat = new WhatsAppChat();
+ window.chatApp = chat; // Exponer globalmente para funciones auxiliares
});
diff --git a/create_media_table.sql b/create_media_table.sql
new file mode 100644
index 0000000..49a53a7
--- /dev/null
+++ b/create_media_table.sql
@@ -0,0 +1,16 @@
+-- Tabla para almacenar archivos multimedia subidos
+CREATE TABLE IF NOT EXISTS media_files (
+ id INT AUTO_INCREMENT PRIMARY KEY,
+ filename VARCHAR(255) NOT NULL,
+ unique_name VARCHAR(255) NOT NULL UNIQUE,
+ file_type VARCHAR(100) NOT NULL,
+ file_size INT NOT NULL,
+ media_type ENUM('image', 'video', 'audio', 'document') NOT NULL,
+ file_path TEXT NOT NULL,
+ public_url TEXT NOT NULL,
+ uploaded_by INT NULL,
+ created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+ INDEX idx_media_type (media_type),
+ INDEX idx_uploaded_by (uploaded_by),
+ INDEX idx_created (created_at)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
diff --git a/execute_media_table.php b/execute_media_table.php
new file mode 100644
index 0000000..c7b8cf4
--- /dev/null
+++ b/execute_media_table.php
@@ -0,0 +1,62 @@
+getConnection();
+
+ // Leer el archivo SQL
+ $sqlFile = __DIR__ . '/create_media_table.sql';
+
+ if (!file_exists($sqlFile)) {
+ throw new Exception("Archivo SQL no encontrado: $sqlFile");
+ }
+
+ $sql = file_get_contents($sqlFile);
+
+ if (empty($sql)) {
+ throw new Exception("El archivo SQL está vacío");
+ }
+
+ // Ejecutar el SQL
+ $result = $conn->query($sql);
+
+ if ($result === false) {
+ throw new Exception("Error al ejecutar SQL: " . $conn->error);
+ }
+
+ echo "✅ Tabla 'media_files' creada exitosamente\n\n";
+
+ // Verificar que la tabla existe
+ $check = $conn->query("SHOW TABLES LIKE 'media_files'");
+ if ($check && $check->num_rows > 0) {
+ echo "✅ Tabla verificada en la base de datos\n\n";
+
+ // Mostrar estructura de la tabla
+ $structure = $conn->query("DESCRIBE media_files");
+ if ($structure) {
+ echo "📋 Estructura de la tabla:\n";
+ echo str_repeat("-", 80) . "\n";
+ printf("%-20s %-20s %-10s %-10s %-20s\n", "Campo", "Tipo", "Null", "Key", "Extra");
+ echo str_repeat("-", 80) . "\n";
+
+ while ($row = $structure->fetch_assoc()) {
+ printf("%-20s %-20s %-10s %-10s %-20s\n",
+ $row['Field'],
+ $row['Type'],
+ $row['Null'],
+ $row['Key'],
+ $row['Extra']
+ );
+ }
+ echo str_repeat("-", 80) . "\n";
+ }
+ } else {
+ echo "⚠️ La tabla no se pudo verificar\n";
+ }
+
+} catch (Exception $e) {
+ echo "❌ Error: " . $e->getMessage() . "\n";
+ exit(1);
+}
diff --git a/services/WhatsAppService.php b/services/WhatsAppService.php
index 6ae9c4b..4bc175b 100644
--- a/services/WhatsAppService.php
+++ b/services/WhatsAppService.php
@@ -181,6 +181,137 @@ class WhatsAppService
return $this->makeRequest('POST', $url, $data);
}
+ /**
+ * Enviar imagen
+ */
+ public function sendImageMessage($to, $imageUrl, $caption = null)
+ {
+ $image = ['link' => $imageUrl];
+
+ if ($caption) {
+ $image['caption'] = $caption;
+ }
+
+ $data = [
+ 'messaging_product' => 'whatsapp',
+ 'to' => $this->formatPhoneNumber($to),
+ 'type' => 'image',
+ 'image' => $image
+ ];
+
+ return $this->sendMessage($data);
+ }
+
+ /**
+ * Enviar video
+ */
+ public function sendVideoMessage($to, $videoUrl, $caption = null)
+ {
+ $video = ['link' => $videoUrl];
+
+ if ($caption) {
+ $video['caption'] = $caption;
+ }
+
+ $data = [
+ 'messaging_product' => 'whatsapp',
+ 'to' => $this->formatPhoneNumber($to),
+ 'type' => 'video',
+ 'video' => $video
+ ];
+
+ return $this->sendMessage($data);
+ }
+
+ /**
+ * Enviar audio
+ */
+ public function sendAudioMessage($to, $audioUrl)
+ {
+ $data = [
+ 'messaging_product' => 'whatsapp',
+ 'to' => $this->formatPhoneNumber($to),
+ 'type' => 'audio',
+ 'audio' => [
+ 'link' => $audioUrl
+ ]
+ ];
+
+ return $this->sendMessage($data);
+ }
+
+ /**
+ * Enviar documento
+ */
+ public function sendDocumentMessage($to, $documentUrl, $filename = null, $caption = null)
+ {
+ $document = ['link' => $documentUrl];
+
+ if ($filename) {
+ $document['filename'] = $filename;
+ }
+
+ if ($caption) {
+ $document['caption'] = $caption;
+ }
+
+ $data = [
+ 'messaging_product' => 'whatsapp',
+ 'to' => $this->formatPhoneNumber($to),
+ 'type' => 'document',
+ 'document' => $document
+ ];
+
+ return $this->sendMessage($data);
+ }
+
+ /**
+ * Subir archivo multimedia a WhatsApp
+ */
+ public function uploadMedia($filePath, $mimeType)
+ {
+ if (!file_exists($filePath)) {
+ throw new Exception("Archivo no encontrado: $filePath");
+ }
+
+ $url = $this->apiUrl . $this->phoneNumberId . '/media';
+
+ $ch = curl_init();
+
+ $postFields = [
+ 'messaging_product' => 'whatsapp',
+ 'file' => new CURLFile($filePath, $mimeType),
+ 'type' => $mimeType
+ ];
+
+ curl_setopt_array($ch, [
+ CURLOPT_URL => $url,
+ CURLOPT_RETURNTRANSFER => true,
+ CURLOPT_POST => true,
+ CURLOPT_POSTFIELDS => $postFields,
+ CURLOPT_HTTPHEADER => [
+ 'Authorization: Bearer ' . $this->token
+ ],
+ CURLOPT_TIMEOUT => 120
+ ]);
+
+ $response = curl_exec($ch);
+ $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+ curl_close($ch);
+
+ if ($httpCode !== 200 && $httpCode !== 201) {
+ throw new Exception("Error subiendo archivo: " . $response);
+ }
+
+ $result = json_decode($response, true);
+
+ if (!isset($result['id'])) {
+ throw new Exception("No se obtuvo ID del archivo subido");
+ }
+
+ return $result['id']; // Retorna el media_id
+ }
+
/**
* Enviar mensaje principal
*/
diff --git a/verify_media_table.php b/verify_media_table.php
new file mode 100644
index 0000000..401a2be
--- /dev/null
+++ b/verify_media_table.php
@@ -0,0 +1,30 @@
+getConnection()->query('DESCRIBE media_files');
+
+echo "📋 Tabla media_files creada exitosamente\n\n";
+echo "Estructura de la tabla:\n";
+echo str_repeat('-', 90) . "\n";
+printf("%-20s %-30s %-10s %-10s %-15s\n", 'Campo', 'Tipo', 'Null', 'Key', 'Extra');
+echo str_repeat('-', 90) . "\n";
+
+while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
+ printf("%-20s %-30s %-10s %-10s %-15s\n",
+ $row['Field'],
+ $row['Type'],
+ $row['Null'],
+ $row['Key'],
+ $row['Extra']
+ );
+}
+
+echo str_repeat('-', 90) . "\n";
+echo "\n✅ Sistema multimedia listo para usar\n";
+echo "\n📝 Puedes ahora:\n";
+echo " 1. Abrir conversations.php\n";
+echo " 2. Seleccionar una conversación\n";
+echo " 3. Hacer clic en el botón 📎 para adjuntar archivos\n";
+echo " 4. Enviar imágenes, videos, audios o documentos\n\n";