Coco

De Yii Framework en Español (Yiiñ)

Por:


Contenido

Coco - Extensión para Subir Archivos en Yii Framework

  • autor:

Christian Salazar <christiansalazarh@gmail.com>

  • repositorio:

https://bitbucket.org/christiansalazarh/coco

'Coco' es un widget (aparte de ser el menor y mas temeroso de mis Yorkies) para manejar subidas de archivos a tu website. Con este widget se pretende crear una herramienta que te ayude a olvidarte de la complejidad de este asunto, sacando provecho de Yii Framework, jQuery, Ajax y UML/MVC La implementación del widget en tu proyecto es muy simple, se hace en dos partes: Primero, Pones el widget en la vista o formulario en donde lo requieras y Segundo en algun controller pones un action fijo en cualquier controller, no solamente aquel del formulario (un action fijo es aquel que se coloca en el metodo de actions() del controller), este action tiene como proposito conectar el código javascript del widget con tu aplicación Yii. Coco toma su funcionalidad de una librería PHP muy buena que consegui hace un año y que decidí implementar para Yii framework en forma de Widget. La licencia del autor de la libreria original es respetada y matiene sus creditos. Puedes hallarlo en el repositorio valums de github.

Archivo: Coco-widget.png

Obtener la Extensión Coco

Repositorio oficial de Coco: https://bitbucket.org/christiansalazarh/coco


  • Si no usas GIT simplemente descargalo del repositorio y descomprimelo dentro de 'protected/extensions'. Para descargarlo sigue el vinculo "Download" que esta al lado de Size 40.6 KB (download) en la ventana de leyenda a la derecha. Ir al repositorio de Coco
  • Si usas GIT haz lo siguiente:
 
cd /home/xxxx/myapp/protected
mkdir extensions
cd extensions
git clone https://christiansalazarh@bitbucket.org/christiansalazarh/coco.git

Configurar la Extensión Coco

1. Edita tu archivo /protected/config/main.php

 
'import'=>array(
        'application.models.*',
        'application.components.*',
        'application.extensions.coco.*',            // <------agrega esto
    ),

2. Conecta Coco a tu aplicación usando un Action estático en siteController. (se hace una sola vez aunque insertes el widget coco varias veces en distintas vistas)

Edita el archivo:

  protected/controllers/siteController.php (aunque puedes usar otro controlador).

agregale lo siguiente:

 
public function actions()
    {
        return array(
            'captcha'=>array(
                'class'=>'CCaptchaAction',
                'backColor'=>0xFFFFFF,
            ),
            'page'=>array(
                'class'=>'CViewAction',
            ),
            'coco'=>array(
                'class'=>'CocoAction',
            ),
        );
    }

3. Inserta el widget coco en una vista.

  
<?php
    $this->widget('ext.coco.CocoWidget'
        ,array(
            'id'=>'cocowidget1',
            'onCompleted'=>'function(id,filename,jsoninfo){  }',
            'onCancelled'=>'function(id,filename){ alert("cancelled"); }',
            'onMessage'=>'function(m){ alert(m); }',
            'allowedExtensions'=>array('jpeg','jpg','gif','png'),
            'sizeLimit'=>2000000,
            'uploadDir' => 'assets/',
            // para recibir el archivo subido:
            'receptorClassName'=>'application.models.MyModel',
            'methodName'=>'onFileUploaded',
            'userdata'=>$model->primaryKey,
        ));
   ?>

¿ Cómo funciona Coco ?

Cuando alguien visite la vista en donde insertaste el Widget verás que aparece un botón con el texto que pusiste en el argumento "buttonText", el cual por defecto dice: "Find & Upload". Alguien podrá arrastrar un archivo a ese botón o podrá darle clic y éste le presentará una caja de selección de archivo a subir. El usuario envia el archivo, y coco internamente invoca a tu action: index.php?r=site/coco con algunos argumentos. Va a transferir a ese action el archivo a subir mediante llamadas ajax. Tu no haces nada en este punto, solo mirar como coco lo hace, incluso te presentará una caja de progreso cancelable. Cuando el action determina que el archivo fue subido (lo sube en la carpeta que tu indicas en el atributo "uploadDir") entonces, hara una de estas dos cosas:

  • Si no has configurado los argumentos: receptorClassName y methodName entonces Coco dejará el archivo en el directorio assets (o donde tu digas en "uploadDir") y solo recibiras una notificacion via ajax en el metodo javascript que has definido en "onCompleted".
  • Si has configurado los argumentos: receptorClassName y methodName, entonces coco desde el lado del servidor creara una instancia de la clase que tu configures en "receptorClassName" y luego invocará un método: aquel que pusiste en "methodName". En ese método podrás recibir la notificacion del archivo subido.

Por tanto, para que esta opción B funcione deberás crear una clase asi:

 
// creas la clase en: protected/models/MyModel.php  (o donde quieras)
class MyModel {

    public function onFileUploaded($fullFileName,$userdata) {
        // userdata es el mismo valor que pusiste en config/main
        // fullFileName es la ruta del archivo listo para leer.
    }
}

y los argumentos a pasarle al widget serían:

 
'receptorClassName'=>'application.models.MyModel',
'methodName'=>'onFileUploaded',

Opciones adicionales de la configuración del Widget Coco

 
'buttonText'=>'Find & Upload',
'dropFilesText'=>'Drop Files Here !',
'htmlOptions'=>array('style'=>'width: 300px;'),
'defaultControllerName'=>'site',
'defaultActionName'=>'coco',

Herramientas personales