Meteor Files Storing a image url in Mongo collection

Question

I'm really lost when it comes to file uploading in meteor and manage the data between client and server. I'm using Meteor Files from Veliov Group to upload multiple images on the client side. They're getting stored in a FilesCollection called Images and I have my Mongo.Collection called Adverts.

collections.js:

Adverts = new Mongo.Collection('adverts');

Images = new FilesCollection({
    collectionName: 'Images',
    storagePath: () => {
        return `~/public/uploads/`;
    },
    allowClientCode: true, // Required to let you remove uploaded file
    onBeforeUpload(file) {
        // Allow upload files under 10MB, and only in png/jpg/jpeg formats
        if (file.size <= 10485760 && /png|jpg|jpeg/i.test(file.ext)) {
            return true;
        } else {
            return 'Limit 10mb';
        }
    }
});
// if client subscribe images
if (Meteor.isClient) {
    Meteor.subscribe('files.images.all');   
};

// if server publish images
if (Meteor.isServer) {
    Images.allowClient();
    Meteor.publish('files.images.all', () => {
        return Images.collection.find();
    });
};

What I'm trying to achieve is, when I upload the images, I wanna store the URLs on the document in Adverts that I'm working with (I'm using iron:router to access those documents _id). I managed to get the URL but only for the first image uploaded, my code for what I saw on the docs:

Template.imageUpload.helpers({
   imageFile: function () {
      return Images.collection.findOne();
   },
   myImage: () => {
      console.log(Images.findOne({}).link())
   }
})

Template.imageUpload.events({
'change #fileInput': function (e, template) {
    if (e.currentTarget.files) {
      _.each(e.currentTarget.files, function (file) {
        Images.insert({
          file: file
        });
      });
    }
  }
})

I was using a Meteor.Call to send the URL to the server, but I couldn't manage to update the document with a new property pic and the value url of the image

server.js:

  imageUpload: (actDoc, imgURL) => { // actDoc is the document id that I'm working on the client
      Adverts.update({'reference': actDoc}, {$set: {'pic': imgURL}})
  },

This is probably a dumb question and everything might in the docs, but I've readed those docs back and forth and I can't manage to understand what I need to do.

First: Your server method is not a correct mongo update, please read docs.mongodb.com/manual/reference/operator/update/set Second: you can directly insert the new url on the server at the time the file has been uploaded, read onAfterUpload in the ostrio:files wiki — Jankapunkt
I'm able to acces the file data with onAfterUpload, but I can only get the path, not the url. And even if I was getting the url how would I store it in the document that the client is working with? im so confused — Pedro Martins

Pedro Martins Pedro Martins · Accepted Answer · 2018-01-31T09:19:26

The answer for my problem was to do it server side

main.js server

FSCollection.on('afterUpload'), function (fileRef) {
   var url = 'http://localhost:3000/cdn/storage/images/' + fileRef._id + '/original/' + fileRef._id + fileRef.extensionWithDot;
}
MongoCollection.update({'_id': docId}, { $set: {url: imgUrl }}})

Meteor Files Storing a image url in Mongo collection

1 Answers