Eventualmente me perguntam como fazer upload de arquivos em Node.js. Não sei exatamente o motivo de perguntarem isso, uma vez que não é algo exatamente difícil, mas como é um assunto que já está na minha pauta de tanto que pedem, resolvi fazer este artigo pra ajudar o pessoal.
Parto do princípio aqui que você já sabe o básico de Node.js, JavaScript e de HTML, conhecimentos estes que podem ser obtidos em outros artigos do portal, em meu livro, em meu curso ou até mesmo no meu canal do YouTube.
Vamos começar instalando o express-generator, pacote que nos ajuda a criar aplicações web com ExpressJS, o mais famoso web framework para Node.js (talvez você precise de permissão de administrador):
npm install -g express-generator
Agora mande criar um novo projeto Express usando o comando abaixo, onde chamo o projeto de fileupload:
express --git -e fileupload
Após entrar na pasta e instalar as dependências com npm install, instale a dependência formidable, que utilizaremos para lidar com o upload de arquivos em Node.js, dentre tantas alternativas existentes na Internet.
npm install -S formidable
Agora vá na pasta views e abra o arquivo index.ejs para editarmos o HTML do projeto, deixando-o como abaixo:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<form action="/" method="post" enctype="multipart/form-data">
<input type="file" name="filetoupload"><br>
<input type="submit">
</form>
</body>
</html>
Note que não tem nada demais aqui, apenas um formulário com um campo de upload de arquivo. Se você executar esta aplicação com npm start, verá algo como abaixo:
Agora vamos programar o comportamento desta página. Fazemos isso indo na pasta routes e abrindo o arquivo index.js, onde temos as rotas da tela inicial.
Adicione a nova rota abaixo dentro deste arquivo:
router.post('/', function(req, res, next){
var formidable = require('formidable');
var form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
res.write('File uploaded');
res.end();
});
});
O que fazemos aqui? Carregamos a extensão formidable que instalamos há pouco, recebemos o form POSTado pelo usuário e salvamos o arquivo através da função form.parse. Se você testar agora já deve estar funcionando.
Mas onde o arquivo foi salvo?
Por padrão ele fica salvo em uma pasta temporária no seu computador. Para mudar isso, vamos modificar nosso código anterior para que usando a biblioteca fs (file system) do Node, possamos mover o arquivo que fizemos upload para uma outra pasta da sua máquina (minha máquina é Unix, logo adapte o caminho de pastas para sua máquina):
router.post('/', function(req, res, next){
var formidable = require('formidable');
var fs = require('fs');
var form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
var oldpath = files.filetoupload.path;
var newpath = '/Users/luizfduartejr/documents/' + files.filetoupload.name;
fs.rename(oldpath, newpath, function (err) {
if (err) throw err;
res.write('File uploaded and moved!');
res.end();
});
});
});
Note que carreguei o módulo fs lá no início do código e que depois uso este módulo para mover o arquivo de lugar no sistema operacional usando a função rename. O arquivo que fiz upload é facilmente encontrado usando o argumento files, que é o terceiro da função form.parse. O resultado na tela é esse:
Mas no seu computador o arquivo que você fez o upload estará disponível na pasta que você mandou salvar.
Fácil, não é?
De 0 a 10, o quanto você recomendaria este artigo para um amigo?