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:
Victor Cavalcante
Victor Cavalcante é marido da Mariana Frioli, pai do Eduardo, Microsoft MVP, trabalha com desenvolvimento web a 11 anos e é focado em padrões de desenvolvimento para web. Trabalha na Lambda3 (www.lambda3.com.br), empresa ágil que insiste em fazer software certo. É ainda professor universitário e atua no grupo .NET Architects desde seu início. Acompanhe seu twitter para saber as novidades:@vcavalcante.