Upload de arquivos em Flash usando a Class FileReference e integração com PHP e MySQL

Neste artigo será visto uma class no Flash muito útil: FileReference. A maneira mais rápida e prática de fazer upload de arquivos usando o Flash.

por Rafael Costa

Vamos estudar hoje uma classe no Flash muuuuito útil: FileReference. A maneira mais rápida e prática de fazer upload de arquivos usando o Flash. Após seu entendimento, vamos integrar o envio com PHP e MySQL para gravar o arquivo no banco de dados.

Mãos à obra!!

Na parte I veremos como funcionam os códigos no Flash e na parte II como integrar o Flash com PHP e MySQL.

PARTE I

Para começar a usar a class, você precisa importá-la para o Flash. Para isso use o seguinte comando:

import flash.net.FileReference;

Agora nós precisamos criar uma variável do tipo FileReference e uma do tipo object para servir de Listener para a class.

var fileRef:FileReference = new FileReference();

var listener:Object = new Object();

fileRef.addListener(listener);

Linha 1 - Cria a variável responsável pela FileRefrence

Linha 2 - Cria o Object que servirá como Listener para class.

Linha 3 - Atribui o Listener à class.

Agora o que você precisa definir, são os tipos de arquivos aceitos.

Isso é feito por um Array com os formatos aceitos. Vamos aceitar arquivos do tipo texto e imagem.

Primeiro vamos criar o Array para todos os tipos aceitos:

var allTypes:Array = new Array();

Criamos o array responsável pelos formatos aceitos no upload.

Agora vamos criar o object para imagens e para texto declarando os tipos aceitos:

var imageTypes:Object = new Object();

imageTypes.description = "Imagens (*.jpg, *.jpeg, *.gif, *.png)";

imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png";

var textTypes:Object = new Object();

textTypes.description = "Arquivos de texto (*.txt, *.pdf, *.doc)";

textTypes.extension = "*.txt; *.pdf; *.doc";

Linha 1 - Novo Object para atribuir os formatos

Linha 2 - Descrição dos formatos aceitos (visível quando abrir a “janelinha” de upload)

Linha 3 - Formato dos arquivos aceitos

E agora vamos adicionar os dois no Array “allTypes” que fica responsável para declarar todos os formatos aceitos.

allTypes.push(imageTypes);

allTypes.push(textTypes);

Atribuir ao array allTypes, os formatos aceitos

Vamos agora conhecer os eventos da class.

Os mais usados, que vamos ver aqui, são:

onSelect() – Ao selecionar o arquivo...

onCancel() – Ao cancelar a seleção...

onOpen() – Ao abrir o arquivo...

onProgress() – Enquanto estiver enviando...(para fazermos o preload do envio)

onComplete() – Ao completar o envio...

onHTTPError() – Erros HTTP(404,505,...)

onIOError() – Para erros de Input e Output, como protocolos, password, ...

onSecurityError() – Erros de Segurança

E os métodos:

browse() - Abrir a “janelinha” de upload

upload() – Fazer upload do arquivo

Agora vamos fazer isso tudo funcionar, isso tudo se integrar.

Quem controlará tudo, será o listener, então quando for usar um método, será sempre assim:

listener.método = function(file:FileReference):Void {

//ações

}

A variável file do tipo FileReference declarada na função servirá para pegarmos as informações do arquivo selecionado.

Para começarmos a fazer nosso sisteminha de upload, crie dois botões e uma caixa de texto dinâmico.

Um botão para “abrir foto...” e outro “enviar foto...”. Instancie-os como: “abrir” e “enviar” (ambos sem aspas). E a caixa de texto dinâmica instancie-a de “caixa” (sem aspas).

Vamos programar agora.

Obs: o atributo file.name pega o nome do arquivo selecionado.

listener.onSelect = function(file:FileReference):Void {

caixa.text = file.name + “ selecionado”;

}

Exibe na caixa de texto o nome do arquivo selecionado.

listener.onCancel = function(file:FileReference):Void {

caixa.text = "Cancelado";

}

Cancela o upload.

listener.onOpen = function(file:FileReference):Void {

caixa.text = "onOpen: " + file.name;

}

Quando iniciar o envio...

listener.onProgress = function(file:FileReference, bytesLoaded:Number, bytesTotal:Number):Void {

caixa.text = "Carregando Imagem: " + file.name + “ - ” + Math.round((bytesLoaded/bytesTotal)*100) + "%";

}

Vamos exibir na caixa de texto a porcentagem do envio

listener.onComplete = function(file:FileReference):Void {

caixa.text = file.name + " enviado com sucesso.";

}

Exibe na caixa de texto uma mensagem de sucesso quando envio for completado.

listener.onHTTPError = function(file:FileReference, httpError:Number):Void {

caixa.text = "onHTTPError: " + httpError + " - " + file.name;

}

Caso ocorra um erro http, exibe na caixa o nome do erro e o nome do arquivo selecionado.

listener.onIOError = function(file:FileReference):Void {

caixa.text = "onIOError: " + file.name;

}

Exibe na caixa que houve um erro IO ( Input / Output )

listener.onSecurityError = function(file:FileReference, errorString:String):Void {

status = "onSecurityError: " + file.name + " errorString: " + errorString;

}

Exibe na caixa que houve um erro de Segurança e mostra o erro.

Finalizamos os eventos da class, agora precisamos criar os métodos.

Nossos botões vão servir para abrir a janela de seleção de arquivo e para enviar o arquivo.

abrir.onRelease = function():Void {

fileRef.browse(allTypes);

}

enviar.onRelease = function():Void {

fileRef.upload("upload.php?nomeArtista="+nomeArtista+"&idade="+idade+"&cidade="+cidade);

}

O primeiro botao abrirá a janela de upload e definará os tipos aceitos para upload, de acordo com o array allTypes.

O segundo botão ficará responsável ao envio do arquivo, para uma página PHP, junto com 3 variáveis que eu decidi criar: Nome, Idade e Cidade, que servirão para o cadastro no MySQL.

A primeira parte do tutorial está terminada, na próxima vamos integrar isso com o nosso banco de dados.

Veja como ficará nossa aplicação (ainda sem o PHP):
http://www.rafaelcosta.com/Tutoriais/FileReference.html

Click aqui para baixar o arquivo fonte:
http://www.rafaelcosta.com/Tutoriais/FileReference.fla

Abraços, até a próxima.