Upload de imagens numa página Web .NET MVC Core
Em projetos simples sempre nos deparamos com a necessidade de realizar upload de imagens ou arquivos em geral em nossas aplicações.
Aqui irei demonstrar à vocês como fazê-lo utilizando .NET MVC , inicialmente salvando os anexos enviados numa pasta dentro da sua aplicação, que pode estar num servidor tradicional ou num Web App da Cloud Azure.
Esta não é a única solução, mas a mais simples, ainda vou demonstrar em outro post como fazê-lo num Storage na Nuvem !
Para começar, vamos criar uma aplicação .NET Core MVC, escolhendo o template de projeto.
Após criar o projeto, vamos criar na pasta “Models” uma classe chamada PessoaModel, ela deverá ser a base para nosso banco de dados onde salvaremos pessoas e a referências para a sua foto.
Clique com o botão direito sobre a pasta “Controllers” e no menu, selecione Add, “New Scaffolded Item”, onde se abrirá a página para criação:
Escolha a opção marcada como 1 na figura.
Depois clique em “Add” e preencha a nova tela conforme apontado abaixo:
Pronto, o .NET irá fazer para você todo o processo de criação de uma “Controller” com os métodos e telas prontas para um Crud.
Iremos realizar uma modificação na “View” responsável pelo método “Create” da aplicação (Inclusão), alterando o campo da foto, para um input type do tipo texto.
Feito isso, nosso “form” está pronto para enviar fotos, mas precisamos preparar nossa “Controller” para recebê-las.
Então vamos até a nossa controller: “PessoaController” e no método “post “ da ação “Create” vamos acrescentar mais funcionalidades.
Ops, precisamos criar os métodos para validar imagem e salvar a foto !
Quando validamos uma imagem, utilizamos a propriedade “ContentType”, que define o tipo de anexo (vide definição do objeto IFormFile), portanto, criei um método que faz a análise, poderia ter feito de outras formas mais elegantes, mas o propósito aqui é a simplicidade.
Agora vamos realizar o salvamento de fato do arquivo, para salvá-lo, partiremos da idéia de salvá-lo na pasta da aplicação, na aplicação .NET MVC, há uma propriedade que retorna para nós qual a pasta raíz do site, sendo assim, no construtor da “Controller”, vamos incluir este path numa variável, através do objeto “IWebHostEnvironment”.
Então, assim que foi instanciada a classe, a variável “_filePath” indica o caminho onde salvaremos nossos anexos.
Então vamos ao método “SalvarArquivo”:
Criaremos na própria “Controller” já que o propósito é apenas didático (eu faria numa classe separada direcionada para métodos reutilizáveis em outros locais se fosse um produto final), vamos à explicação para cada linha:
- incluiremos no nome original da imagem, um novo “Guid”, para que os nomes não se repitam na pasta, esta estratégia visa evitar que haja sobreposição de 2 fotos com o mesmo nome (obs: há N formas de fazer isso, isto é só um exemplo).
- iremos concatenar no path uma pasta chamada “fotos” para que as fotos fiquem agrupadas dentro dela.
- iremos validar se a pasta existe, caso não, iremos criá-la.
- vamos instanciar um “stream” para que faça o salvamento da imagem na pasta indicada com o nome que indicamos no passo 1.
- dentro do comando delimitado pela cláusula “using”, utilizaremos o método to tipo de dado “IFormFile” que faz a cópia do objeto chamado “CopyToAsync” salvando-o no objeto instanciado como “stream”, sendo assim a foto foi salva neste passo.
- retornamos o nome criado, já que ele foi gerado dentro do método, para que possa ser utilizado no salvamento do objeto “Pessoa” no banco de dados.
Pronto, método explicado, vamos à mais um detalhe, quero ver a imagem, portanto vamos editar a nossa “index.cshtml” para que exiba a foto na listagem.
Pronto, depois de tudo isso, é só rodar uma “migration”, criar o banco e dados e testar a aplicação.
Faremos um teste incluindo uma pessoa no cadastro.
E após concluída, podemos conferir na listagem (index).
E para finalizar, vamos alterar o evento Post do método Delete, para que possa excluir a imagem que foi salva, senão nossa pasta irá virar um cemitério de arquivos perdidos, sem vínculo com nossa tabela.
iremos adicionar as linhas com as seguintes funcionalidades:
- define o nome do arquivo que iremos remover
- verificamos se o arquivo existe de fato na pasta, e caso ele exista faz a exclusão.
Pronto ! temos o básico de uma aplicação com upload !
Vou preparar uma nova postagem com uso de um Storage para armazenagem das imagens.
Caso queiram ter acesso ao código, está no meu github !
Gostou do artigo? clique no ícone👏e me siga para ver as próximas publicações !!
Sigam-me nas redes sociais: https://linktr.ee/nizzola
