Utilizando drag in drop e parecendo o Dropbox

Olá pessoal, hoje eu vou mostrar como desenvolver um sistema MVC utilizando a linguagem C# da Microsoft e o Visual Studio como ferramenta; mostrando como fazer upload de arquivos apenas com drag in drop e com o resultado igual ao do Dropbox.

Utilizado:

  • Linguagem C#
  • Ferramenta Visual Studio
  • Plataforma MVC Web
  • JavaScript JQuery
  • Stilo CSS

Veja como ficou no final: Image

Figura 1 - Resultado final

Existe uma área específica da tela que o usuário pode arrastar o arquivo desejado para envio pela Web browser. Esse envio os dados serão enviados pela HomeController.cs. Existe um método chamado EnviarArquivos e dentro dele é gerado um novo nome para o arquivo e salvo na pasta dentro do mesmo projeto chamada UploadedFiles.

Veja o código 1.1 mostrando a HomeController.cs.

Código 1.1 - Código da HomeController.cs using System; using System.Collections.Generic; using System.IO; using System.Web; using System.Web.Mvc;

namespace MVCDragDropUpload.Controllers
{
	public class HomeController : Controller
	{
       //GET: Home
        public ActionResult Index()
    		{
      	  return View();
    		}

    		[HttpPost]
    	public ActionResult EnviarArquivos(IEnumerable<HttpPostedFileBase> files)
    		{
        		//verifica os arquivos enviados
        		foreach (var file in files)
	            {
           		 //atribui um novo nome.
            		string filePath = Guid.NewGuid() + Path.GetExtension(file.FileName);

            		//salva dentro da mesma pasta dentro do projeto
        			file.SaveAs(Path.Combine(Server.MapPath("~/UploadedFiles"), filePath));
            }

	          //retorna a mensagem via JSon
   		     return Json("arquivo enviado com sucesso.");
    	}
	}
}

Cada linha do código possui um comentário para melhor ajudá-lo(a). Lembro que existe apenas esse controller no projeto e no final vou colocar ele no https://www.github.com/mauricio-junior.

Depois da controller, vamos trabalhar com o HTML e CSS. Lembro que vou deixar tudo no mesmo arquivo para melhor entender, mas o ideal seria separar em arquivos .css.

O primeiro passo foi gerar uma área <div> chamada AreaDeUpload. Existe também um stilo chamado #AreaDeUpload com algumas configurações. Veja o código 1.2.

Código 1.2 - Div e CSS

<h2>Arraste e jogue o arquivo</h2>
<div id="AreaDeUpload">
    Arraste seus arquivos nesta área.
</div> 

<style>
	#AreaDeUpload {
    	background: #f1f1f1;
    	border: black dashed 1px;
    	height: 200px;
    	text-align: center;
    	color: #000;
    	padding-top: 12px;
    	text-align: center;
    	vertical-align: central;
	}
</style>

O próximo foi importar o arquivo JQuery chamado FileDrop.js. Esse arquivo que vai fazer a mágina disponível na plataforma JQuery. Coloquei no projeto dentro da pasta Scripts caso você queira verificar mais detalhes.

Código 1.3 - Arquivo FileDrop.js

<script src="~/Scripts/jquery.filedrop.js"></script>

A próxima linha será a definição dos drags:

  • DragOver
  • DragLeave
  • Drop
  • AfterAll
  • UploadFinished

Define quando o usuário arrasta, quando sai, quando solta, depois de tudo e como acaba de fazer o upload para o servidor. No final do arquivo cshtml eu coloquei o código 1.4.

Código 1.4 - JavaScript

@section Scripts{
<script src="~/Scripts/jquery.filedrop.js"></script>
<script type="text/javascript">
    $(function () {
        $('#AreaDeUpload').filedrop({
            url: '@Url.Action("EnviarArquivos")',
            allowedfiletypes: [],
            allowedfileextensions: [],
            paramname: 'files',
            maxfiles: 5,
            maxfilesize: 5, // in MB
            dragOver: function () {
                $('#AreaDeUpload').addClass('ArtivarDrop');
            },
            dragLeave: function () {
                $('#AreaDeUpload').removeClass('ArtivarDrop');
            },
            drop: function () {
                $('#AreaDeUpload').removeClass('ArtivarDrop');
            },
            afterAll: function (e) {
                $('#AreaDeUpload').html('arquivos enviados com sucesso.');
            },
            uploadFinished: function (i, file, response, time) {
                $('#uploadList').append('<li class="list-group-item">'+file.name+' enviado com sucesso.</li>')
            }
        })
    })
</script>
}

O código 1.4 mostra que os itens que o filedrop vai pegar o arquivo e jogar para a controller. Mostra o que irá acontecer com a classe quando soltar e tudo mais. Note que o script adiciona e remove classes do CSS dependendo de cada ação.

Vamos adicionar estas classes primeiro no <style> antes de qualquer coisa. Veja o código 1.5.

Código 1.5 - Adicionando todos os Styles

<style>
   	 #AreaDeUpload {
    	background: #f1f1f1;
    	border: black dashed 1px;
    	height: 200px;
    	text-align: center;
    	color: #000;
    	padding-top: 12px;
    	text-align: center;
    	vertical-align: central;
 	}

	.ArtivarDrop {
    	background: #77bafa !important;
    	border: solid 2px blue !important;
    	opacity: .5;
    	color: black !important;
  	}

	.rodape {
		text-align: center;
    	border: solid 0px Gray;
    	font-size: 8pt;
		font-family: Verdana;
		font-weight: bold;
    	width: 100%;
		color: Black;
    	position: fixed;
    	bottom: 0px;
    	left: 0px;
    	background: #77bafa;
	}
</style>

Note que tem a classe rodape para manter sempre o item no final da página. E de acordo com as ações, o script vai mudando as tags para informar ao usuário na tela. Partindo disso, basta agora adicionar a div e a ul principal chamada uploadList, ela que vai aparecer para o usuário indicando o local para arrastar e jogar o arquivo. Coloquei alguns <br/> no final para a página ter muita área. Veja o código 1.6.

Código 1.6 - Mostrando a tela para o usuário.

<h2>Arraste e jogue o arquivo</h2>
<div id="AreaDeUpload">
	Arraste seus arquivos nesta área.
</div>

<ul class="list-group rodape" id="uploadList"></ul>
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

Pronto, a tela está disposta ao usuário para download, com todo o código. Lembra-se que o código 1.4 mostra que a URL chamada é o mesmo nome do método MVC.

@Url.Action("EnviarArquivos")

Veja a figura 2 mostrando o resultado final.

Image Figura 2 - Fazendo o upload e mostrando o arquivo para o usuário

O código do site completo está dentro do meu https://www.github.com/mauricio-junior. Espero ter ajudado e qualquer dúvida por entrar em contato pelo site https://www.mauriciojunior.org.