Mais uma dica de um ótimo plugin para utilizarmos nos nossos projetos.

Sempre precisamos fazer upload de arquivos, fotos, documentos e é interessante disponibilizar para o usuário uma interface rica, com suporte a drag and drop, progresso do upload, upload de multiplos arquivos entre outras opções, e nisso o PlUpload é um ótimo plugin, apesar de não funcionar somente com JQuery, ele possui runtimes de Flash, Silverlight e alguns outros, mas hoje vou utilizar o Jquery queue widget para fazer uploads.

Para fazer download é só clicar aqui, existe uma versão gratuita, ou se alguém quiser pode também licenciar o plugin de upload, o que muda é suporte e ajuda os caras a ganhar um merecido dinheiro :).

Existem várias opções de runtime, e diversos arquivos no arquivo de download, segue os arquivos que utilizei no exemplo.

[sourcecode language="html"]
<script src="@Url.Content("~/Scripts/plupload.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/plupload.html4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/plupload.html5.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.plupload.queue.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/plupload/jquery.plupload.queue.css")" rel="stylesheet" type="text/css" />
[/sourcecode]

Um detalhe é que para funcionar corretamente, também adicione as imagens disponibilizadas no arquivo de download, e preste atenção no arquivo de .css para ver o diretório de colocar as imagens, ou altere o jquery.upload.queue.css para apontar para sua pasta de imagens.

Feito isso eu criei um método upload no meu controller plupload, segue o código que não é foco do artigo fazer o armazenamento dos arquivos :), e também repare no parâmetro do método que tem que ser HttpPostedFileBase.

[sourcecode language="csharp"]
[HttpPost]
public void Upload(HttpPostedFileBase file)
{
// Lógica para salvar a foto
}
[/sourcecode]

Feito isso precisamos configurar nosso HTML, que só vai ter uma div com um id específico, bem difícil assim mesmo :), é nessa div que o plugin de upload será montado.

[sourcecode language="html"]
<div id="upload"></div>
[/sourcecode]

E para finalizar, temos o JQuery que configura o plugin na div que criamos, detalhe para algumas configurações básicas do plugin, onde informo os runtimes que vamos utilizar, tamanho máximo de cada arquivo, a URL que ele vai enviar as fotos, e as extensões suportadas. Mais configurações podem ser encontradas na documentação do plugin.

[sourcecode language="javascript"]
<script type="text/javascript">
$(function () {

$("#upload").pluploadQueue({
runtimes : "html5,html4",
url : "/plupload/upload",
max_file_size : "4mb",
filters: [
{title : "Imagens", extensions : "jpg,png"}
]
});

});
</script>
[/sourcecode]

Feito isso é só testar e ver o upload funcionando, com progresso, opção para exclusão de itens antes de iniciar o upload, muito bom!

Código fonte no GitHub.

Abraços e até o próximo post.