Upload com ASP.NET MVC e jQuery

Já havia recebido 3 e-mails com dúvidas de como fazer upload no ASP.NET MVC e hoje me chamaram no messenger com a mesma dúvida, então decidi escrever um post de como fazer isso de forma simples e bonita, é claro que vou usar o jQuery para isso.

No Web Form tínhamos um controle server side chamado FileUpload e no ASP.NET MVC não existe este controle, então temos que escrever o HTML necessário para fazer o formulário da forma correta, eu estou usando o plugin uploadify que faz o envio assíncrono de arquivos para o servidor, ele é muito flexível, mas irei mostrar somente o básico dele.

A primeira coisa a saber é que para enviar um arquivo para o server é necessário que o formulário contenha o parâmetro enctype configurado para "multipart/form-data", sem isso ele não vai conseguir enviar o arquivo, vejam o código HTML abaixo:

<h2>Upload</h2>
<% using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ %>
    <fieldset>
    <label for="photo">Insira a sua foto:</label><input type="file" id="photo" name="photo" /><br />
    <input type="submit" value="Enviar" />
    </fieldset>
<%} %>

Agora faça o download do plugin uploadify, copie os arquivos jquery.uploadify.v2.1.0.min.js e swfobject.js para a pasta Scripts, copie também os arquivos cancel.png, uploadify.css e uploadify.swf para a pasta Content.

Crie uma pasta com o nome de files na raiz da aplicação, é nesta pasta que será salvo os arquivos enviados.

Inclua o código JavaScript na MasterPage Site.Master (este é apenas um exemplo, eu prefiro colocar este javascript na View):

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<link href="../../Content/uploadify.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/swfobject.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#photo').uploadify({
            'uploader': '/content/uploadify.swf',
            'script': '<%=Url.Action("Upload","Home") %>',
            'cancelImg': '/content/cancel.png',
            'fileDesc':'Aruivos de Imagem',
            'fileExt': '*.jpg;*.gif',
            'sizeLimit':'4000000',
            auto:true
        });
    });
</script>

No código acima eu estou configurando o endereço de onde estão os arquivos necessários para o plugin, defino o caminho da action que irá receber o arquivo, o tamanho máximo do arquivo, habilitei a opção auto que automaticamente irá enviar o arquivo após a seleção do mesmo e também defino a extensão permitida para fazer o upload, isso é bem interessante porque na caixa de dialogo só irá aparecer os arquivos com a extensão que você definir.

Existem mais configurações que podem ser utilizadas, você pode conferir elas na documentação do plugin.

Agora só está faltando o código server side, eu criei uma action chamada upload no HomeController que irá receber e salvar o arquivo:

[AcceptVerbs(HttpVerbs.Post)]
public void Upload(string id)
{
    var file = this.Request.Files[0];
    string savedFileName = System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "files");
    savedFileName = System.IO.Path.Combine(savedFileName, System.IO.Path.GetFileName(file.FileName));
    file.SaveAs(savedFileName);
    Response.Write("OK");
}

Com isso você já terá funcionando o jQuery uploadify com o ASP.NET MVC, vejam como fica no final: