2

Como faço um upload de imagem no meteor? Segui esse tutorial aqui mas não funcionou muito não. A imagem aparentemente é salva, porque verifiquei na collection e existe um registro lá, mas não consigo nem listar e muito menos é criado um diretório ou coisa do tipo dentro do meu projeto.

Vi também que nesse tutorial quando ele cria o event é criada uma variável onde está pegando o id do usuário, para que eu consiga exibir a imagem eu preciso salvar a url em outra collection?

2 Respostas 2

1

Bom dia, a melhor forma que encontrei de fazer upload em meteor foi utilizando esse pacote

https://github.com/CollectionFS/Meteor-CollectionFS

Ele cria um objeto, a URL da imagem é um atributo dessa imagem.

Eu utilizo um pacote pra debug que pode te ajudar

https://atmospherejs.com/meteortoys/allthings

Recomendo. Boa sorte.

1
  • Bem vindo a comunidade SO Pt. Seria de grande ajuda se você colocasse o código e não somente links, se por algum motivo o link ficar offline a sua resposta se tornará inútil.
    – Rubico
    Commented 25/03/2016 às 10:47
0

A resposta dada pelo @altemberg-andrade é mais abrangente, mas se você não precisar de tanto e algo mais simples, veja esse exemplo:

/client/main.html

<body>
  <form id="formSubmit" method="post">
    <input type="file" id="arquivo" name="arquivo" />
    <input type="submit" />
  </form>
  <a href="/upload/">ver uploads</a>
</body>

/client/main.js

import('meteor/meteor').then(({ Meteor }) => {
  formSubmit = document.getElementById('formSubmit')
  formSubmit.addEventListener('submit', (evt) => {
    evt.preventDefault()
    let file = document.querySelector('#arquivo').files[0];
    let reader = new FileReader();

    reader.onloadend = function () {
      let buffer = new Uint8Array(reader.result)
      let { type, name } = file
      Meteor.call('upload', { name, type, buffer }, (err, res) => {
        if(err) throw err
        alert(`sucesso! ${res}`)
      });
    };
    reader.readAsArrayBuffer(file)
  });
});

/server/main.js

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { WebApp } from 'meteor/webapp';

const collUpload = new Mongo.Collection('upload')

const uploadPath = '/upload/'

WebApp.connectHandlers.use(uploadPath, (req, res, next) => {
  //console.log(req._parsedUrl)
  let file_id = req._parsedUrl.pathname.replace(uploadPath, '')
  let arquivo = collUpload.findOne(file_id)
  if(!arquivo){
    let arqs = collUpload.find().fetch().map((arq) => {
      return {
        _id: arq._id,
        name: arq.name
      }
    })
    res.writeHead(404);
    res.end(JSON.stringify(arqs, null, 2))
  } else {
    res.writeHead(200, {
      'Content-Type': arquivo.type,
      // use attachment para forçar o download
      'Content-Disposition': `inline; filename=${arquivo.name}`
    });
    res.end(Buffer.from(arquivo.buffer));
  }
});

Meteor.methods({
  upload: function(data){
    return collUpload.insert(data)
  }
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .