Implementação do Uploadify

Boa Tarde!

Estou tentando instalar o widget uploadify (http://www.uploadify.com) e chama-lo no _form da minha página de upload, fiz o download do jquery.uploadify-v2.1.0, descompactei e copiei para o protected/extensions, e usei os seguintes códigos:

Na view _form:




<?php 

$this->widget('application.extensions.uploadify.uploadifyWidget', 

    array(

        'name'=>'uploadme',

        'options'=> array(

            //'uploader' => '/js/uploadify.swf',

            'script' => $this->createUrl('test/UploadedFiles'), 

            'cancelImg' => '/js/cancel.png',

            'auto' => true,

            'multi' => false,

            'folder' => '/tmp',

            'scriptData' => array('extraVar' => 1234, 'PHPSESSID' => session_id()),

            //'fileDesc' => 'Declaratiebestanden',

            //'fileExt' => '*.*',

            'buttonText' => 'Upload bestanden',

            'buttonImg' => '/images/upload.gif',

            'width' => 150,

            ),

        'callbacks' => array( 

           'onError' => 'function(evt,queueId,fileObj,errorObj){alert("Error: " + errorObj.type + "\nInfo: " + errorObj.info);}',

           'onComplete' => 'function(){alert("Complete");}',

           'onCancel' => 'function(evt,queueId,fileObj,data){alert("Cancelled");}',

        )

    )); 

?>



No controller:




public function actionUploadedFiles()

{

    // flash does NOT pass the session

    // thus we pass the id with a $_POST variable

    Yii::app()->session->sessionID = $_POST['PHPSESSID'];

    Yii::app()->session->init();


    // Do whatever you need to do with the files you just received

    $files = var_export($_FILES, true);

    $this->log('Files ' . $files);

    echo 1;

}



De acordo com a documentação no site do yii framework (http://www.yiiframework.com/extension/euploadify/).

Mas nao funcionou.

Alguem pode me ajudar por favor? :)

Cara, eu usei o uploadfy uma vez num projeto que não era Yii. Muito bonito e prático, mas evito usar qualquer coisa que tenha flash nas minhas apps (Preferência minha). Não sei até que ponto posso te ajudar, mas vou tentar. O que acontece quando vc tenta subir um arquivo? vc debugou o PHP? Da algum erro no controller?

Oi Daniel!

Então cara, o problema é a instalação do widget, eu não sei como fazer essa instalação no yii, eu apenas descompactei o download do jquery.uploadify que eu baixei e joguei dentro do protected/extensions. Depois disso eu tentei usar a linha de codigo:


$this->widget('application.extensions.uploadify.uploadify', 

E ele retorna o erro:

YiiBase::require(/home/rafael/public_html/bdd/protected/extensions/uploadify/uploadify.php) [<a href=‘yiibase.require’>yiibase.require</a>]: failed to open stream: No such file or directory

Se puder esclarecer estas duvidas para mim por favor :) seria de grande ajuda.

calma lá … tu ta baixando direto por http://www.uploadify.com ou vc ta usando a extensão do Yii euploadify (http://www.yiiframework.com/extension/euploadify/) ???

Baixei tudo pelo www.uploadify.com

Eu tentei baixar o Yii euploadify mas dá um erro ao abrir.

Baixei tudo pelo www.uploadify.com

Eu tentei baixar o Yii euploadify mas dá um erro ao abrir.

Uploadify é apenas o plugin do jquery. euploadify é um widget pra yii que, a partir de sua classe, gera html, css e registra os scripts necessários pra utilizar o uploadfy junto ao yii de maneira mais simpes. então, basicamente, o ero que te da é valido. Quando vc usa o código abaixo, ele em primeiro lugar, procura a classe responsável pela geração do componente em protected/extensions/uploadfy, cujo o nome da classe e do arquivo se chame uploadifyWidget.

Como vc baixou apenas o plugin do JQuery, esta classe não existe, por isso ocorre o erro. Ai vc tem duas opções:

1 - Implementar a classe widget vc mesmo.

2 - Tentar fazer os widgets criados por outros usuários funcionar. Tem 2 aqui no site pra uploadfy.

http://www.yiiframew…ion/euploadify/

http://www.yiiframew…sion/uploadify/

Como vc já disse que o euploadfy não ta funcionando, tenta usar o segundo. E não se esqueça de criar as actions necessárias no controller pra envio dos arquivos, pois o uploadfy envia os arquivos de forma autônoma ao seu form. Depois poste os resultados :)




<?php 

$this->widget('application.extensions.uploadify.uploadifyWidget', 

    array(

        'name'=>'uploadme',

        'options'=> array(

            //'uploader' => '/js/uploadify.swf',

            'script' => $this->createUrl('test/UploadedFiles'), 

            'cancelImg' => '/js/cancel.png',

            'auto' => true,

            'multi' => false,

            'folder' => '/tmp',

            'scriptData' => array('extraVar' => 1234, 'PHPSESSID' => session_id()),

            //'fileDesc' => 'Declaratiebestanden',

            //'fileExt' => '*.*',

            'buttonText' => 'Upload bestanden',

            'buttonImg' => '/images/upload.gif',

            'width' => 150,

            ),

        'callbacks' => array( 

           'onerror' => 'function(evt,queueId,fileObj,errorObj){alert("Error: " + errorObj.type + "\nInfo: " + errorObj.info);}',

           'onComplete' => 'function(){alert("Complete");}',

           'onCancel' => 'function(evt,queueId,fileObj,data){alert("Cancelled");}',

        )

    )); 

?>




Usa a minha extensão SFancyUpload que você será mais feliz com mais combinações de browsers / SOs…tive problemas com uplodify no Linux e por isso resolvi escrever a extensão, até o momento não me deixou na mão.

O funcionamento é basicamente o mesmo, porém, o Fancy possui barra de progresso geral e por arquivo, controle de fila e singlebutton upload.

Give it a try!!

:D

Abraços!!

Parece uma boa. Aqui na empresa eu vou ter que implementar o upload de fotos no cdastro de produtos, mas to adiando essa tarefa a um tempo já, por não ser primordial. Mas quando o fizer, granto que vou dar uma olhada no seu.

ótimo, por favor…

eu sei que tem melhorias a fazer, mas tô meio corrido aqui, mesmo assim, sugestões serão muito bem vindas!!!

abraços!!

Perdão pela demora de um reply Daniel xD

O euploadify ou o sfancyupload além de fazer o upload do arquivo ele consegue gravar em um banco de dados também?

Eu estou tentando fazer um formulario com dois campos, um para o file e o outro para descriçao do arquivo, estas extensões permitem que eu faça isso?

Abraços,

Grato,

Rafael Yukio

Olá, Rafael,

O Fancy, por si só, não grava os dados no banco, mas envia para o seu script de upload e este sim gravaria a descrição do arquivo.

Pode ser feito da seguinte maneira com o fancy:

  • colocar o input do campo descrição

  • passar o parâmetro de multiupload para false

  • enviar nos dados adicionais do fancy (tem uma propriedade "data") o conteúdo do campo descrição

  • no seu script de upload (a url controller/action que você informa para o fancy) você grava a descrição no banco de dados além de mover o arquivo para o diretório desejado

Não fiz um teste efetivo pra te dizer se funciona porque estou sem meu note aqui, mas com o fancy pelo menos a idéia seria essa.

Abraços!!

Olá scoob.junior!

Vou testar isso já para ver se funciona, :)

Grato,

Rafael Yukio

Eu irei ter que usar está linha de código no _form do meu upload, certo?


//------------- for single button upload (singebutton) ----------

$statusBoxId = 'fancy-single'

 

$this->widget('application.extensions.fancyupload.SFancySingleButton',

    array('name'=>'single',

           'statusBoxId'=>$statusBoxId,

           'options'=>array(

                'target'=>'select-0',

                'queued'=>false,                                //only one file uploaded

                'multiple'=>false,                              //only select one file

                'verbose'=>true,                                //remove in production

                'url'=>$this->createUrl('fancy/UploadedFiles'),  //send files to this controller/action

                'typeFilter'=>array('Images (jpg, jpeg, gif, png)'=>'*.jpg; *.jpeg; *.gif; *.png'),  //only images

                'instantStart'=>true,                           //start upload right after the selecion

                'appendCookieData'=>true,                       //send cookies together

            ),

 

 

            'callbacks'=>array(

                'onSelectSuccess'=>"function(files) {

                    if (Browser.Platform.linux) window.alert('Warning: Due to a misbehaviour of Adobe Flash Player on Linux,the browser will probably freeze during the upload process.Since you are prepared now, the upload will start right away ...');

                        window.alert('Starting Upload - ' + files[0].name + '(' + Swiff.Uploader.formatUnit(files[0].size, 'b') + ')');

                        this.setEnabled(false);

                }",

 

                'onSelectFail'=>"function(files) {

                     window.alert(files[0].name + '(Error: #' + files[0].validationError + ')');

                }",

 

 

                'onQueue'=>"function() {

                     if (!swf.uploading) return;

                     var size = Swiff.Uploader.formatUnit(swf.size, 'b');

                     link.set('html', swf.percentLoaded + '% - ' + size);

                }",

 

 

                'onFileComplete'=>"function(file) {

 

                    if (file.response.error) {

                        window.alert('Failed Upload ' + this.fileList[0].name + '. Please try again. (Error: #' + this.fileList[0].response.code + ' ' + this.fileList[0].response.error + ')');

                    } else {

                        window.alert('Successful Upload');

                    }

 

                    file.remove();

                    this.setEnabled(true);

                }",

 

                'onComplete'=>"function() {

                    link.set('html', linkIdle);

                }",

 

            )

 

 

));

Mas o que seria os campos statusBoxId e target?

Estou tentando instalar mas a unica coisa que aparece ao executar é um link "Change".

Eu sugiro que você utilize o outro código de view (o multifile upload) porque este de singlebutton é mais para o usuário trocar a foto do perfil dele (pelo menos eu imagino algo assim)

Estou postando em anexo o código para o controller e o código para a view

Para efeito de teste, por favor, crie um diretório /protected/tmp e dê permissão de escrita para o servidor (para testar, se Linux, 777, se windows, dê permissão controle total para todos nesta pasta tmp debaixo de protected)

O controller coloque dentro do diretório controllers e a view, crie uma pasta dentro de protected/views chamada fancy e coloque lá dentro

Ficará algo assim:

/protected/tmp =>onde gravaremos o arquivo

/protected/controllers/FancyController.php

/protected/views/fancy/fancyqueue.php

Basta acessar a url: http://localhost/suaaplicacao/fancy ou http://localhost/suaaplicacao/index.php?r=fancy

Note que eu herdei a classe do controller de "Controller" porque na Yii 1.1 dá erro de breadcrumbs se você herdar direto de CController. Caso esteja utilizando a versão Yii 1.0, por favor, troque

class FancyController extends Controller por class FancyController extends CController

Como isto funciona?

repare no código da view que eu inseri um callback chamado onBeforeStart

        'onBeforeStart'=&gt; &quot;function(file) {


			alert('iniciando');


up.setOptions( {data: {extradata: document.id('descricao').get('value')	} });


        }&quot;,

Neste callback eu insiro na opção “data” um campo chamado extradata e atribuo a ele o valor do input text chamado descricao. O nome extradata pode ser mudado para o que você precisar, ele estará disponível no controller com um $_POST[‘extradata’]

Lá no controller eu insiro no array de retorno um elemento com o mesmo nome

	&#036;return['extradata'] = &#036;_POST['extradata'];

quando o $return é enviado de volta para o script, no callback onFileSuccess eu inseri um alert para te mostrar o que você escreveu no campo

alert(json.get(‘extradata’));

O que você terá de fazer é:

  • No seu controller, pegar o valor da chave que enviou pelo "data" e inserir no seu banco de dados

  • Fazer os tratamentos de arquivo e string (removi tudo para simplificar)

Seguem anexos os arquivos php

Espero que isto resolva, eu testei aqui e funcionou legalzão

:)

493

FancyController.php

494

fancyqueue.php

Abraços!!

:o Muitoooo legal!

O upload funcionou certinho aqui!

Muito Obrigado, Scoob!

Ainda não testei inserir no banco, mas eu já tenho uma tabela pronta, pra inserir os dados no banco eu nao preciso de um model ou fazer um crud no yiic?

A minha tabela "upload" tem os seguintes campos:

> idupload (auto-incremento)

> imagename (<nome_arquivo>)

> imageurl (../protected/<nome_arquivo>)

> relatedinformation (<descricao_arquivo>)

É possivel incluir uma funçao assim no FancyController?


public function actionCreate()

	{

            Yii::app()->setLanguage(Yii::app()->user->sitelanguage);


            $model=new upload;


		if(isset($_POST['upload']))

		{

			$model->attributes=$_POST['upload'];


                        $model->imagename = CUploadedFile::getInstance($model, "imagename");

                        $model->imagename->saveAs('protected/views/upload/images/'.$model->imagename->getName());


                        $model->imageurl = "protected/views/upload/images/".$model->imagename->getName();


                        if($model->save())

                                {

                                //echo "Upload done!";

                                //echo $model->imageurl."|||".$model->idupload;

                                //echo $model->imagename."|||".$model->idupload;

				exit();

                                }//$this->redirect(array('show','id'=>$model->idupload));


		}

		$this->renderPartial('create',array('model'=>$model));


        }

Grato,

Rafael Yukio

Sim, é aconselhável que você tenha um model definido, basta criar um com o yiic.

Acredito que bastaria você incluir os códigos necessários no controller do seu model e apontar nos parâmetros da view que cria o widget do fancy a url do controller/action que você programou.

Só um detalhe que o plugin do fancy utiliza o nome "Filedata" por padrão, então se você checar

$file = CUploadedFile::getInstanceByName("Filedata"); você obtém o arquivo, caso contrário acho que pode acusar algum erro.

Pelo que deu pra perceber, o único atributo que você recebe do usuário é o relatedinformation, então bastaria checar e inserir

if (!empty($_POST[‘descricao’]) && ($file = CUploadedFile::getInstanceByName(“Filedata”)) ) {

// 1 - faça as validações necessárias para evitar upload de arquivos indesejados

switch(CFileHelper::getMimeType($file->getTempName())){

       case 'application/zip':


           break;





       case 'image/jpeg':


           &#036;info = @getimagesize(&#036;file-&gt;getTempName());


            if (&#036;info) {


                &#036;return['width']  = &#036;info[0];


                &#036;return['height'] = &#036;info[1];


                &#036;return['mime']   = &#036;info['mime'];


            }


           break;





       default:


            &#036;return = array(


                'status' =&gt; '0',


                'error' =&gt; 'Tipo de arquivo não permitido'


            );


    }

// 2 - defina um save path

$savePath = Yii::app()->getBasePath().’/views/upload/images/’;

// 3 - atribua os outros valores

$model = new upload;

$model->imagename = $file->getName();

$model->imageurl = $savePath . $file->getName(); //não sei se você quer o caminho físico ou a url, ajustar conforme necessário

$model->relatedinformation = $_POST[‘descricao’];

if ($model->save()){

    //vamos retornar sucesso para a widget do fancy


    &#036;return = array(


            'status' =&gt; '1',


            'name' =&gt; &#036;file-&gt;getName()


    );

// 4 - salva a imagem

$model->imagename->saveAs($savePath.$model->imagename->getName());

} else {

    &#036;return = array(


            'status' =&gt; '0',


            'error' =&gt; 'erro na gravação'


    );

}

} else {

    &#036;return = array(


            'status' =&gt; '0',


            'error' =&gt; 'erro ao obter arquivo ou descrição em branco'


    );

}

//devolve para o widget sucesso ou erro

echo json_encode($return);

//o redirect você pode fazer via javascript no callback onSuccess da chamada da widget

Bom, estou sem editor aqui, mas a idéia inicial acho que seria algo assim. Eu não utilizei um atributo do model para o arquivo enviado porque as validações que eu tentei fazer em algumas versões do Yii com arquivos não me deixaram satisfeito, daí parti para a força bruta e fiz no switch case testando o mimetype (confiar só no javascript não é boa idéia).

Acho que isso dá uma idéia…se alguém tiver uma sugestão melhor, adoraria ouvir porque não estou certo se esta seria a implementação mais adequada…

Abraços!!!

:)

hi friends…

     how to work alert message and onmouseover event ..

i use this->

alert box

<?php echo CHtml::submitButton(‘submit’,array(‘name’=>‘submit’,‘onSubmit’ => ‘function(){alert(“ok”);}’));

on mouse over

<?php echo CHtml::link(‘Our events’,array(‘events/view’),array(‘style’=>‘color:#000;text-decoration:none;’),

																							 array('onmouseover'=&gt;'color:#FFF;')); ?&gt;

its not working

help me…

thanks in advance…