48 Copiar vinculo para compartir de forma automática en el curso de LARAVEL (PHP y MySql) FullStack

Duración: 12 min
Módulo: 🔗 Opciones de Compartición y Privacidad Lección 6 de 7

Descripción

🔗 Lección 48: Copiar Vínculo para Compartir de Forma Automática

Este capítulo finaliza el módulo "Compartir Archivos" implementando la funcionalidad de copiar automáticamente el enlace para los archivos en estado público, lo cual permite compartirlos fácilmente con usuarios externos.

🛠️ Implementación de la Función de Copiado

El instructor utiliza la librería JavaScript clipboard.js para lograr la copia automática del enlace al hacer clic en un botón:

  1. Instalación de la Librería:
    • Se utiliza un CDN (Content Delivery Network) para incluir el archivo JavaScript minificado de clipboard.js en la plantilla principal (layout) del proyecto [01:48].
  2. Configuración del Script:
    • Se añade un bloque <script> que inicializa la librería, apuntando a la clase del botón que ejecutará la acción de copiado [06:48].
    • La versión de la librería y el script de inicialización deben ser precisos para evitar errores [07:19].

📝 Generación y Copia del Enlace

Dentro del modal "Compartir", la implementación se divide en dos elementos clave:

  1. Campo del Enlace (Input):
    • Se crea un campo <input> de tipo text que contiene el URL completo del archivo público. Este URL se genera utilizando la función asset() de Laravel: asset('storage/' . $archivo->carpeta_ID . '/' . $archivo->nombre) [08:00].
    • Se le asigna un ID único concatenando el prefijo Foot (o similar) con el ID del archivo (Foot-{archivo_ID}) [08:46].
  2. Botón "Copiar Enlace":
    • El botón recibe el atributo data-clipboard-target, el cual debe apuntar al ID único del campo <input> que contiene el enlace. Esto indica a clipboard.js qué contenido copiar al hacer clic [08:59].

Verificación del Resultado

  • La funcionalidad permite al usuario hacer clic en el botón "Copiar Enlace" para un archivo en estado público [09:40].
  • El enlace copiado (localhost/sistema/public/storage/...) se puede pegar en cualquier lugar y permite el acceso directo al archivo (imagen, PDF, etc.) sin necesidad de autenticación, confirmando que el archivo está correctamente alojado en el directorio público (storage/public) [08:36].
  • Se corrige un error importante donde se debe asegurar que tanto el input como el botón de copiado utilicen un ID único basado en el $archivo->ID para que la función de copiado opere en el archivo correcto y no se confunda entre múltiples elementos [10:35].