Upload de Imagens com Multer - gravar filename

Oi Airton!

Pela mensagem você esta tentando modificar o header de uma req/res depois queva resposta já foi enviada e isso é impossível , por isso o erro. Tem que alterar antes.

Veja que vc faz res.json e lá depois faz res.send('hi'). Res.json envia a resposta, por isso não pode fazer o res.send depois.

Oi Flávio,

Mas o simples fato de eu alterar a ordem dos blocos não altera o resultado, certo? Tentei inserir fs.readFile antes do res.json, mantendo dentro da função de callback de upload, mas continua o mesmo erro.

Outra coisa: essa função seria mesmo a responsável por enviar ao Mongo o filename da imagem do upload? É no res.send() que isso ocorre?

Vou te mostrar com detalhes. Veja seu código e os comentários:

app.post('/upload', function(req, res, next) {
    //from this point I tried to insert filename into MongoDB
    upload(req,res,function(err){
        if(err){

          // BELEZA, TA CERTO, VC DA UMA RESPOSTA E O RETURN EVITA QUE O BLOCO CONTINUE
            res.json({error_code:1,err_desc:err});
            return;
        }

      // JÁ ENVIOU UMA RESPOSTA, NÃO PODE MAIS ENVIAR OUTRA, PORQUE ELA JÁ FOI ENVIADA!
        res.json({error_code:0,err_desc:null});

        console.log(req.file);
        console.log('TEST: ' + req.file.filename);
        fs.readFile(req.file.path, function (err, data) {
            var newPath = "./uploads/" + req.file.filename;
            fs.writeFile(newPath, data, function (err) {


              // BOOM! PROBLEMA..VC ESTA ENVIANDO UMA RESPOSTA, MAS UMA JÁ FOI ENVIADA. É COMO SE OS CORREIOS JÁ TIVESSEM SAÍDO PARA ENTREGA E VOCÊ QUER QUE ELE ENTREGUE UM NOVO PACOTE, NÃO VAI ROLAR.
                res.send("hi");  
            });
            console.log(newPath);
        });

    });
});

Sendo assim, fica a lei que, jamais dentro de uma rota do Express que lide com req e res você pode enviar a resposta mais de uma vez, lembrando que res.json() envia como resposta um json e res.send() envia como resposta um texto, mas ambos enviam.

Tipo, viajei total com seu res.send('hi'), não faço a menor ideia do que você deseja com isso, ele é o problema.

Pegou a ideia?

Sim, entendi a lógica da tentativa dupla de envio. E a intenção com o res.send() era fazer um teste para ver se algo imprimia ou se era enviado para o Mongo (nem que fosse um "hi").

Retirando ele, o erro não ocorre, mas o dado (filename da imagem) continua não sendo gravado no Mongo (eu imprimo no console, mas só).

O que está faltando?

Mas em nenhum momento do seu código você esta persistindo o tal dado, como ele poderia ser gravado no banco? Ou eu não entendi sua pergunta.

Deve ser esse o problema. O que ocorre é que eu tenho outros campos no mesmo formulario que são gravados normalmente (como o que é feito no curso), mas este eu me perdi, por que eu crio um nome para ele no express.js, aqui:

filename: function (req, url, cb) {
      var datetimestamp = Date.now();
      cb(null, url.fieldname + '-' + datetimestamp + '.' + url.originalname.split('.')[url.originalname.split('.').length -1]);
  }

Eu tenho então o dado (o novo nome da imagem), consigo imprimir no console, mas não consigo unir este com os demais dados do formulário e gravá-lo no Mongo... Onde eu faço a persistência a partir daí?

Melhor postar o código completo, porque só esse pedaço não consigo entender rapidamente o código.

Eu preciso do código da API que recebe os dados do arquivo...pelo o que eu entend, é o /upload, certo?

Eu inclui todo o codigo que está trabalhando no upload atualmente na minha aplicação. Havia um outro trecho, no arquivo controller da aplicação (arquivo chamado workers-controller.js e que não é mencionado no post aqui), que eu comentei por que não estava fazendo upload do arquivo para a pasta /uploads. Segue este trecho:

.controller('MyImg',['Upload','$window',function(Upload,$window){
        var vm = this;
        vm.submit = function(){ //function to call on form submit
            if (vm.formulario.file.$valid && vm.file) { //check if from is valid
                vm.upload(vm.file); //call upload function
            }
        }
        vm.upload = function (file) {
            Upload.upload({
                url: '/upload', //webAPI exposed to upload the file
                data:{file:file} //pass file as data, should be user ng-model
            }).then(function (resp) { //upload function returns a promise
                if(resp.data.error_code === 0){ //validate success
                    $window.alert('Success ' + resp.config.data.file.name + 'uploaded. Response: ');
                } else {
                    $window.alert('an error occured');
                }
            }, function (resp) { //catch error
                console.log('Error status: ' + resp.status);
                $window.alert('Error status: ' + resp.status);
            }, function (evt) {
                console.log(evt);
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
                vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
            });
        };
    }]);

Não sei se era desse código que vc estava falando... Mas também estou com o projeto completo no GitHub, se vc preferir.

Oi Airton!

É o código do servidor, não do Angular que preciso ver. É o código do servidor que interage com o banco, que recebe a imagem, é aquele no qual você esta com dúvidas.

Ah, sim! Por enquanto tenho apenas métodos para adição e lista dos itens.

app/api/workers.js

var mongoose = require('mongoose');

module.exports = function(app) {

    var api = {};
    var model = mongoose.model('Worker');

    api.lista = function(req, res) {
      model.find()
        .then(function(workers) {
            res.json(workers);
        }, function(error) {
            console.log(error);
            res.sendStatus(500);
        });
    };

    api.adiciona = function(req, res) {
      model.create(req.body)
        .then(function(worker) {
            res.json(worker);
        }, function(error) {
            console.log(error);
            res.sendStatus(500);
        });
    };
    return api;
};

Mas e aquele código do express.js que você esta lidando com o recebimento do arquivo? É nele que você fez o teste e esta com problema. Você desativou?

Sim, eu comentei a linha res.send("hi"), mas mantive o metodo fs.writeFile. Assim o erro não ocorre.

Então, na sua API de upload você precisa gravar o arquivo em disco. Quando grava o arquivo em disco, fisicamente, guardará o caminho do arquivo no banco. Veja, você não grava a imagem no banco. apenas o caminho dela.

Para isso você precisa:

1 - receber os dados e gravá-los no file system 2 - Guardar o caminho do arquivo caso tudo tenha sido feito corretamente no MOngoose. Para isso, precisará de algum Esquema. Onde você quer guardar o caminho? No usuário? Então, crie uma propriedade nele que guarde o caminho da foto. 3 - Toda vez que você precisar da foto, buscará a foto no seu filesystem com o endereço que guardou, por exemplo, no seu equema de Usuário e enviará para quem pedi.

Isso envolve: processo de escrita de um arquivo, processo de leitura de um arquivo. Você precisa consolidar essas duas etapas. Vi no seu código que você já ensaiou um teste com fs.readFile e fs.writeFile. É por ai mesmo. Só lembre que quando a escrita do arquivo for bem sucedida, no callback para fs.writeFile você grava o caminho da foto no banco.

Mas é exatamente essa minha dúvida: como gravo o caminho da imagem no banco, no callback para fs.writeFile?

No callback para o writeFile, você precisa acessar um MODEL do Mongoose. Lembre-se que é por esses modelos que você realiza a persistência do seu banco. Ou você cria um novo modelo, ou adiciona uma propriedade string que vai guardar a informação que você quer. Como essa foto é do usuário, acredito que você tenha um modelo Usuario ou User.