Usando Plupload com ASP.NET MVC
Neste post você vera como fazer upload de vários arquivos de uma única vez utilizando Plupload e o ASP.NET MVC, a API do Plupload permite enviar os arquivos utilizando HTML5, Silverlight, Flash, ou um simples form em HTML, exibe barra de progresso e redimensiona as imagens.
Para iniciar esse tutorial você devera ter instalado em sua máquina o Visual Studio 2012 (pode utilizar o Visual Studio 2010) e baixar o Plupload do site oficial.
Como de costume o código deste exemplo está no meu GitHub.
- Se você ainda não viu as Vídeo-Aulas da Série ASP.NET MVC aprovei e veja também!
Primeiro vamos criar um novo projeto em ASP.NET MVC 4 Web Application no Visual Studio 2012, vamos chama-lo de PLUploadMVC e escolher o template Basic (O mesmo que o template Empty, so que já inclui algumas bibliotecas JavaScript), não esqueça de Escolher a View Engine Razor.
Como estamos utilizando o Visual Studio 2012 RC e ele possui os Bundles que carregam os scripts para nós, temos que alterar a ordem do RenderBody() no _Layout.cshtml para que fique como apresentado abaixo:
@ViewBag.Title
@Styles.Render("~/Content/themes/base/css", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@RenderBody()
@RenderSection("scripts", required: false)
Agora vamos baixar o PlUpload com o tipo de licença GPLv2, uma vez baixado descompacte o arquivo e copie a pasta plupload para dentro da pasta Scripts do seu projeto. Aproveite e crie uma pasta chamada Uploads dentro da pasta Content, este vai ser o local onde vamos enviar as fotos.
De volta ao Visual Studio, selecione o Projeto, e depois exiba todos os arquivos (Show All Files), e clique com o botão direito do mouse sobre a pasta plupload e escolha a opção Include In Project, para incluir esta pasta em nosso projeto.
Agora que já temos o PlUpload em nosso projeto, vamos adicionar um novo Controller chamado Home (Na opção de Scaffolding Options, lembre-se de escolher Empty MVC controller) e adicionar o seguinte código a ele:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web.Mvc;
namespace PLUploadMVC.Controllers
{
public class HomeController : Controller
{
/*Exibe a página inicial do nosso exemplo*/
public ActionResult Index()
{
string path = HttpContext.Server.MapPath("~/Content/Uploads/");
var diretorio = new DirectoryInfo(path);
var arquivos = diretorio.GetFiles("*.*");
IList listaDeArquivos = arquivos.Select(fileinfo => fileinfo.Name).ToList();
ViewBag.Arquivos = listaDeArquivos;
return View();
}
/*Exibe um exemplo mais simples de uso do plupload*/
public ActionResult Personalizado()
{
return View();
}
/*Exibe o exemplo completo de uso do plupload*/
public ActionResult Completo()
{
return View();
}
/*Action usada pelo plupload para enviar os arquivos*/
[HttpPost]
public ActionResult Upload(int? chunk, string name)
{
//Arquivo que o PlUpload envia.
var fileUpload = Request.Files[0];
//Local onde vai ficar as fotos enviadas.
var uploadPath = Server.MapPath("~/Content/Uploads");
//Faz um checagem se o arquivo veio correto.
chunk = chunk ?? 0;
var uploadedFilePath = Path.Combine(uploadPath, name);
//faz o upload literalmetne do arquivo.
using (var fs = new FileStream(uploadedFilePath, chunk == 0 ? FileMode.Create : FileMode.Append))
{
var buffer = new byte[fileUpload.InputStream.Length];
fileUpload.InputStream.Read(buffer, 0, buffer.Length);
fs.Write(buffer, 0, buffer.Length);
}
return Content("Success", "text/plain");
}
}
}
Neste código temos quatro Actions que nos auxilia em nossa demonstração, as 3 primeiras são utilizadas para criar as nossas páginas de exemplo, a Ultima (Upload) é utilizada pelo PlUpload para enviar as fotos para o nosso servidor.
Continuando precisamos criar as Views das três primeiras Actions do nosso controller Home, vamos lá então:
Código da página inicial do nosso exemplo, nossa View Index.
@{
ViewBag.Title = "Usando o PlUplaod com ASP.NET MVC 4";
}</pre>
<h2>Escolha um dos exemploas abaixo</h2>
<ul>
<li>@Html.ActionLink("Personalizado", "Personalizado", "Home")</li>
<li>@Html.ActionLink("Completo", "Completo", "Home")</li>
</ul>
<h2>Listas de Arquivos Enviados</h2>
<ul>
<ul><!-- Recebe uma lista de arquivos do diretorio Content/Uploads e lista-os --></ul>
</ul>
<ul>
<ul>@foreach (var path in ViewBag.Arquivos)</ul>
</ul>
<ul>
<ul>{</ul>
</ul>
<img src="@Url.Content(" alt="" width="250px" />
<ul>}</ul>
<pre>
Nada de especial nesta view, recebemos um lista de arquivos da ViewBag e mostramos eles em nossa página.
Agora vamos criar nossa View Personalizado, para isso digite o seguinte código após criar a view:
@{
ViewBag.Title = "Upload Personalizado";
}
<!--Load plupload and all its runtime scripts-->
<script type="text/javascript" src="@Url.Content("></script><script type="text/javascript">// <![CDATA[
/*Este exemplo foi retirado do proprio site do PlUpload*/
$(document).ready(function () {
var uploader = new plupload.Uploader({
runtimes: 'flash,html5,silverlight',
browse_button: 'pickfiles',
container: 'container',
max_file_size: '2048mb',
/*ESTES É A ACTION QUE VAMOS USAR PARA OS UPLOADS*/
url: '@Url.Action("upload", "Home")',
flash_swf_url: '../../Scripts/plupload/js/plupload.flash.swf',
silverlight_xap_url: '../../Scripts/plupload/js/plupload.silverlight.xap',
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
]
});
uploader.bind('Init', function (up, params) {
$('#filelist').html("
<div>Current runtime: " + params.runtime + "</div>
");
});
$('#uploadfiles').click(function (e) {
uploader.start();
e.preventDefault();
});
uploader.init();
uploader.bind('FilesAdded', function (up, files) {
$.each(files, function (i, file) {
$('#filelist').append('
<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' + '</div>
');
});
up.refresh(); // Reposition Flash/Silverlight
});
uploader.bind('UploadProgress', function (up, file) {
$('#' + file.id + " b").html(file.percent + "%");
});
uploader.bind('Error', function (up, err) {
$('#filelist').append("
<div>Error: " + err.code + ", Message: " + err.message + (err.file ? ", File: " + err.file.name : "") + "</div>
");
up.refresh(); // Reposition Flash/Silverlight
});
uploader.bind('FileUploaded', function (up, file) {
$('#' + file.id + " b").html("100%");
});
});
// ]]></script></pre>
<h2>Personalizado</h2>
<div id="container">
<div id="filelist">Não foi encontrado o runtime</div>
<a id="pickfiles" href="#">[Selecionar Arquivos]</a>
<a id="uploadfiles" href="#">[Enviar Arquivos]</a></div>
<ul>
<li>@Html.ActionLink("Voltar", "Index", "Home")</li>
</ul>
<pre>
Neste código que foi retirado do site do PlUpload, o que realmente importa é qual será a nossa action de Upload, o restante é configuração do PlUpload.
Agora vamos a nossa ultima view, a View Completo, após adicionar a view, acrescente o seguinte código a mesma.
@{
ViewBag.Title = "Completo";
}</pre>
<h2>Completo</h2>
<pre>
<!--Load plupload and all its runtime scripts-->
<script type="text/javascript" src="@Url.Content("></script><script type="text/javascript" src="@Url.Content("></script>
<script type="text/javascript">// <![CDATA[
// Convert divs to queue widgets when the DOM is ready
$(function () {
$("#uploader").pluploadQueue({
// General settings
runtimes: 'flash,silverlight,browserplus,html5',
max_file_size: '10mb',
chunk_size: '1mb',
unique_names: true,
// Resize images on clientside if we can
resize: { width: 320, height: 240, quality: 90 },
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
url: '@Url.Action("upload", "Home")',
flash_swf_url: '../../Scripts/plupload/js/plupload.flash.swf',
silverlight_xap_url: '../../Scripts/plupload/js/plupload.silverlight.xap',
});
// Client side form validation
$('form').submit(function (e) {
var uploader = $('#uploader').pluploadQueue();
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('StateChanged', function () {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].submit();
}
});
uploader.start();
} else {
alert('You must queue at least one file.');
}
return false;
});
});
// ]]></script></pre>
<div id="uploader">
Seu browser não suporta Flash, Silverlight, Gears, BrowserPlus ou HTML5.</div>
<ul>
<li>@Html.ActionLink("Voltar", "Index", "Home")</li>
</ul>
<pre>
Este código exibe o PlUpload completo, onde já vem com uma interface padrão para listar os arquivos selecionados e exibe o progresso do envio e a opção para cancelar o arquivo e a ação como um todo.
Bom pessoal era isso que tínhamos para ver neste artigo, o PlUpload é um excelente plugin de uploads, utilizo ele a muito tempo, desde o tempo do PHP, é claro que podemos fazer muito mais, como por exemplo adicionar uma marca d’água em nossas fotos, redimensiona-las em vários tamanhos mas isso é assunto para outro artigo.
Fiquem na Paz e até a próxima.
