Web Forms -Upload de Arquivos

O objetivo da aula de hoje é enviar um arquivo para o servidor.

Para isso, vamos criar um novo campo chamado foto no formulário que criamos na aula anterior e faremos da seguinte forma:

• Ao clicar no campo, abrirá um diretório do nosso computador para que possamos selecionar um arquivo e, quando clicarmos em enviar, enviaremos os dados para o servidor;
• No servidor será localizado o arquivo de configuração chamado web.config, para sabermos onde se encontra o diretório onde guardaremos o arquivo.
• Após sabermos o diretório , o arquivo será gravado fisicamente neste diretório.
• Obteremos o caminho do arquivo (path), retornando para o modelo, que retornará para a view.

Vamos abrir o arquivo web.config no projeto e inserir uma sessão de configuração chamada appSettings.

Dentro da sessão appSettings iremos adicionar uma key chamada caminhoArquivo.

Criaremos uma pasta no projeto chamada arquivos onde ficarão armazenados os arquivos e, em value, digitaremos o nome desta pasta, conforme código abaixo:

      
       
        < configuration> 
          < system.web>
            < compilation debug="true" targetFramework="4.5.2" />
            < httpRuntime targetFramework="4.5.2" />
          < /system.web>

          < appSettings> 
            < add key="caminhoArquivo" value="\arquivos" />
          < /appSettings> 

        < /configuration>
     
       
    

Iremos inserir um componente de upload no formulário do tipo FileUpload chamado fileFoto:

      
         
        
        < html xmlns="http://www/w3.org/1999/xhtml">
        < head runat="server> 
          < title > < /title>
        < /head>
        < body>
            < form ="post" action="./Cadastro.aspx" id="form1">
              < div>
                < asp:Panel ID="pnlCamposCadastro" runat="server">
                  < asp:Label ID="lblNome" runat="server" Text="Nome"> < /asp:Label>
                  < asp:TextBox ID="txtNome" runat="server">< /asp:TextBox>
                  < br />
                  < asp:Label ID="Label2" runat="server" Text="Telefone">< /asp:Label>
                  < asp:TextBox ID="txtTelefone" runat="server">< /asp:TextBox>
                  < br />
                  < asp:Label ID="Label1" runat="server" Text="Foto">< /asp:Label>
                  < asp:FileUpload ID="fileFoto" runat="server">< /asp:FileUpload>
                  < br />
                  < br />
                  < asp:Button ID="btnSalvar" runat="server" Text= "Salvar">
                < /asp:Panel>
              < /div>
            < /form>
        < /body>
        < html>
       
    

Observe que ao clicarmos com o botão direito do mouse no browser e ir no menu exibir código fonte da página, notem que foi adicionada uma propriedade chamada enctype no formulário do tipo multipart/form-data. Quando o código se transforma em HTML é inserido esta propriedade como multipart/form-data pois é necessário para fazer o upload do arquivo e a tag input foi definida como type="file".

      
         
        
        < html xmlns="http://www/w3.org/1999/xhtml">
        < head runat="server> 
          < title > < /title>
        < /head>
        < body>
            < form method="post" action="./Cadastro.aspx" id="form1" enctype="multipart/form-data">
              < input type="file" name="fileFoto" id="fileFoto" >
            < /form>
        < /body>
        < html>
       
    

Agora vamos fazer o código que será executado quando clicarmos no botão salvar. Seguem os passos que iremos seguir:

• Guardar em uma variável o caminho do arquivo que está no diretório da aplicação, utilizando a classe AppDomain;
• Concatenar o diretório da aplicação com o caminho do arquivo que está configurado em AppSetting;
• Salvar o arquivo com SaveAs.
• Criar a propriedade Foto na classe Usuario e salvar o arquivo.

      
        public partial class Cadastro : System.Web.UI.Page 
        {
  
          protected void btnSalvar_Click(object sender, EventArgs e)
          {
            string caminhoArquivo = AppDomain.CurrentDomain.BaseDirectory + 
                                  System.Configuration.ConfigurationManager.AppSettings["caminhoArquivo"] + @"\"+
                                  fileFoto.filename;
            fileFoto.SaveAs(caminhoArquivo);
            var usuario = new Usuario();
            usuario.Nome = txtNome.Text;
            usuario.Telefone = txtTelefone.Text;
            usuario.Foto = System.Configuration.ConfigurationManager.AppSettings["caminhoArquivo"].Replace(@"\","/")+ "/" + fileFoto.filename;
            usuario.Salvar();
  
            txtNome.Text = "";
            txtTelefone.Text = "";
            mostrarLista();
          }
  
        }  
       
    

Criando a propriedade Foto na classe Usuario.

      
        
        public Class Usuario
        
        {
          public Usuario(){}
          
          public string Nome { get; set; }
          public string Telefone { get; set; }
          public string Foto { get; set; }
          public static List< Usuario> Lista = new List< Usuario>();

          public List< Usuario> Todos()
          {
            return Usuario.Lista;
          }

          public void Salvar()
          {
            Usuario.Lista.add(this);
          }

        }  
       
    

Após clicar em Salvar no formulário, podemos verificar em Solution Explorer no projeto, que o arquivo foi salvo na pasta arquivos.

Vamos agora mostrar a imagem no Gridview, ao invés do caminho da imagem.Para isso, vamos seguir os passos:

• Clicar na Aba Design na parte inferior do projeto;
• Selecionar o Gridview gridResultado e clicar na seta que aponta para a direita;
• Clicar no menu Edit Columns;
• Em available fields, selecionar BoundField e clicar no botão Add;
• Em BoundField properties, selecionar os campos que queremos que apareça no GridView:
• selecionar a propriedade HeaderText e preencher o conteúdo com Nome;
• selecionar a propriedade DataField e preencher o conteúdo com Nome;
• selecionar a propriedade HeaderText e preencher o conteúdo com Telefone;
• selecionar a propriedade DataField e preencher o conteúdo com Telefone;
• Para o campo Foto iremos utilizar um imageField, clicando em available fields;
• Em ImageField properties no GridView:
• selecionar a propriedade HeaderText e preencher o conteúdo com Foto;
• selecionar a propriedade DataImageUrlField e preencher o conteúdo com Foto;

Vamos utilizar CSS para estilizar a imagem através da tag < style> na tag head da nossa página, para diminuir o tamanho da imagem no GridView.

      
         
        
        < html xmlns="http://www/w3.org/1999/xhtml">
        < head runat="server> 
          < title > < /title>
          < style>
              img{
                width:100px;
              }
          < /style>
        < /head>
        < html>
       
    

Se clicarmos em inspecionar página, veremos que o HTML criou uma tabela (table) para o gridview e na imagem foi criado uma tag < img> colocando o path do arquivo diretamente.

Então sempre que um componente for inserido na página, será sempre convertido em HTML.