File Uploads en Yii Framework (con "drag and drop")

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 !

'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.

1. DESCARGA O CLONA COCO.
   
   Si no usas GIT simplemente copia el contenido de la extension directamente dentro de 'extensions', si usas GIT haz lo siguiente:
   
   
   cd /home/blabla/myapp/protected
   mkdir extensions
   cd extensions
   git clone git@bitbucket.org:christiansalazarh/coco.git
2. SETUP EN CONFIG/MAIN
   
   
   Edita tu archivo /protected/config/main.php
   'import'=>array(
           'application.models.*',
           'application.components.*',
           'application.extensions.coco.*',            // <------agrega esto
       ),
   
   
3. CONECTA A "COCO" A TU APLICACION CON UN ACTION ESTATICO
   
   
   Edita protected/controllers/siteController.php (aunque puedes usar otra).
   Este action solo es requerido una vez para todo el proyecto !!
   y agregale lo siguiente (coloreado) :
   
   
   public function actions()
       {
           return array(
               'captcha'=>array(
                   'class'=>'CCaptchaAction',
                   'backColor'=>0xFFFFFF,
               ),
               'page'=>array(
                   'class'=>'CViewAction',
               ),
               'coco'=>array(
                   'class'=>'CocoAction',
               ),
           );
       }
4. INSERTA EL WIDGET 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 ?

1. 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".
2. 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.
3. 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.
4. 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:
   
   a) 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".
   
   b) 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',
   
   

OTRAS OPCIONES DEL WIDGET:

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