Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii
Code

Cómo programar con Yii2: Subir archivos

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product image
What You'll Be Creating

Si se está preguntando, "¿Qué es Yii?" Echa un vistazo a mi tutorial anterior: Introducción a Yii Framework, que revisa los beneficios de Yii e incluye una visión general de lo que es nuevo en Yii 2.0, publicado en octubre de 2014.

En este capitulo de la serie Cómo programar con Yii2, estoy orientando a los lectores en el uso de Yii2 Framework para PHP. En este tutorial, te guiaré a través de los conceptos básicos de subir archivos e imágenes en Yii2.

Para estos ejemplos, seguiremos imaginando que estamos construyendo un framework para publicar actualizaciones de estado simples, por ejemplo nuestro propio mini-Twitter. La imagen de arriba demuestra escribir una actualización corta al subir una foto que tomé del Taj Mahal.

Sólo un recordatorio, yo participo en los comentarios. Estoy especialmente interesado si tiene diferentes enfoques, ideas adicionales o desea sugerir temas para futuros tutoriales. Si tiene alguna pregunta o sugerencia de tema, por favor, hazla. También puede contactarme directamente en Twitter @reifman.

Complementos de carga de archivos

Yii2 Image Uploads - Kartik File Input Widget Demo Examples

Hay dos complementos de carga de archivos para Yii2 que parecen los más robustos:

  1. El Widget FileInput de Kartik Visweswaran (mostrado arriba)
  2. El 2Amigos BlueImp File Uploader (un envoltorio para el BlueImp JQuery File Uploader)

Para este tutorial, decidí continuar con el complemento de Kartik. Lo encontré más fácil de usar y mejor documentado que el complemento 2Amigos. Sin embargo, el BlueImp File Uploader tiene algunas características intrigantes de la experiencia del usuario que puede que desee explorar (se muestra a continuación):

Yii2 Image Uploads - 2Amigos and BlueImp File Upload Examples

Programando con el complemento FileInput

Comencemos por instalar y utilizar el cargador de archivos e integrarlo en nuestro applet de publicación de estados tipo-Twitter. Una vez más, usaremos el árbol de aplicaciones de Yii2 Hello que puedes descargar con el enlace del botón de GitHub del costado o debajo.

Instalación del complemento

Primero, podemos usar composer para agregar kartik-v/yii2-widget-fileinput a su aplicación:

Ampliando de la tabla estado

A continuación, debemos agregar campos para el archivo que subiremos a nuestra tabla estado. En este ejemplo, dejaremos que el usuario cargue una imagen para ir junto con su estado.

Los campos que agregaremos son para el nombre de archivo original de los archivos cargados, así como un nombre de archivo único que se almacenará en nuestro servidor para su visualización:

  • image_src_filename
  • image_web_filename

Cree una nueva migración para agregar estos campos a la tabla estado:

Esta es la migración personalizada para agregar los dos campos como cadena:

A continuación, ejecute la migración:

Dado que Yii2 está construido con una arquitectura Modelo Vista Controlador (MVC), hay tres otras áreas de programación que necesitamos implementar para el cargador de archivos:

  1. El Modelo Status
  2. La vista y el formulario Status
  3. El controlador Status

Mejora de la funcionalidad del Modelo

Ahora, haremos cambios en el archivo /models/Status.php. Primero, necesitamos proporcionar atributos y reglas de validación para los nuevos campos de imagen, así como la variable de $image temporal que el widget utilizará para cargar el archivo.

A continuación, agregamos comentarios para las dos nuevas variables $image_xxx_filename y creamos una variable temporal pública llamada $image:

A continuación, agregaremos validación para nuestra imagen, como el tipo de archivo y el tamaño máximo:

Y nuevas etiquetas de atributos para las vistas:

Ahora podemos pasar a los cambios en View en el formulario ActiveModel.

Agregar nuestra vista y la funcionalidad del formulario

Integración de carga de imágenes en el formulario de publicación de estado

Yii2 Image Uploads - Creating a Status with Our New File Input Capability

Para habilitar la integración del formulario de carga de imágenes en las actualizaciones de estado (mostradas arriba), necesitamos realizar cambios en el archivo /views/status/_form.php.

Primero, incluimos el widget kartik\file\FileInput cerca de la parte superior y actualizamos el formulario para que se convierta en multipart, lo que soporta la publicación de archivos:

A continuación, entre el campo Permissions (Permisos) y los botones Submit (Enviar), agregamos el widget FileInput:

En la línea de pluginOptions, restringimos los tipos de archivo a formatos de imagen comunes como jpg.

Cuando esté completo, se verá algo así, esperando que el usuario agregue una imagen:

Yii2 Image Uploads - Create Status Page with File Upload Added

Visualización de la imagen

También voy a agregar código para mostrar la imagen cargada para más tarde (después de que terminemos el soporte del controlador).

Primero, lo agregaré a la página de vista de estado (/views/status/view.php), que es muy básica. Sin embargo, exhibiré la imagen debajo de los detalles del artículo:

Se verá algo como esto:

Yii2 Image Uploads - Enhanced Status View with Image Below

También agregamos una pequeña vista en miniatura a nuestra página de índice de estado (/views/status/index.php). He añadido un atributo de columna personalizado al widget GridView de Yii2:

En última instancia, se verá así:

Yii2 Image Uploads - Enhanced Status Index with Uploaded Image Thumbnails

Creando el soporte del controlador

Para que todo lo anterior sea posible, necesitamos terminar la integración del controlador.

En la parte superior de /controllers/StatusController.php, tenemos que incluir yii\web\UploadedFile:

Entonces tenemos que actualizar la función actionCreate:

Esencialmente, esto realiza las siguientes operaciones:

  1. Capturamos el nombre de archivo original de la información del formulario de archivo cargado (image_src_filename).
  2. Generamos un nombre de archivo único para nuestro servidor (image_web_filename).
  3. Guardamos el archivo en su directorio de carga (/web/uploads/status/).
  4. Guardamos el modelo.
  5. Redireccionamos a la página de vista mejorada.

Usted puede ver los resultados finales con la imagen de arriba, que incluye una foto del Taj Mahal.

El File Input Widget de Kartik también ofrece configuraciones más avanzadas que documenta bastante bien, como Arrastrar y Soltar:

Yii2 Image Uploads - Enhanced File Input Widget Options with Drag and Drop

Mire más de estos y compruébelos en las siguientes páginas:

¿Que sigue?

Espero que esto le ayude con los fundamentos de la carga de archivos en su aplicación Yii2. Si desea ver otro paso a través similar de este tipo de funcionalidad,  consulte Creando su startup con PHP: configuración de usuario, imágenes de perfil y detalles de contacto. Ese tutorial ofrece una integración ligeramente diferente de este tutorial, usando pestañas, actualizando perfiles de usuario y escalando las imágenes.

Yii2 File Uploader Meeting Planner User Profile Image Upload

Vea los próximos tutoriales en mi Serie: Cómo programar con Yii2 mientras continúo sumando diferentes aspectos del framework. También puede comprobar mi serie Creando su Startup con PHP, que está utilizando la plantilla avanzada de Yii2 como construir una aplicación del mundo real.

Si quieres saber cuándo llega el próximo tutorial de Yii2, sígueme @reifman en Twitter o consulta mi página de instructor. Mi página de instructor incluirá todos los artículos de esta serie tan pronto como se publiquen.

Enlaces relacionados

Aquí hay una variedad de enlaces que he utilizado para investigar y escribir este tutorial:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.