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.