How to reference another collection on insert?

Question

I'm trying to figure how to take an Image (a file using CollectionFS) and insert the Image's Id into my Items imageId field:

lib/collections/items.js

Items = new Mongo.Collection("items");
Items.attachSchema(new SimpleSchema({
  name: {
    type: String,
    label: "Name",
  },
  userId: {
    type: String,
    regEx: SimpleSchema.RegEx.Id,
    autoform: {
      type: "hidden",
      label: false
    },
    autoValue: function () { return Meteor.userId() },
  },
  image: {
    type: String,
    optional: true,
    autoform: {
      label: false,
      afFieldInput: {
        type: "fileUpload",
        collection: "Images",
        label: 'Select Photo',
      }
    }
  },
  imageId: {
   type: String
  }
}));

lib/collections/images.js

if (Meteor.isServer) {
  var imageStore = new FS.Store.S3("images", {
    accessKeyId: Meteor.settings.AWSAccessKeyId, 
    secretAccessKey: Meteor.settings.AWSSecretAccessKey, 
    bucket: Meteor.settings.AWSBucket, 
  });

  Images = new FS.Collection("Images", {
    stores: [imageStore],
    filter: {
      allow: {
        contentTypes: ['image/*']
      }
    }
  });
}

// On the client just create a generic FS Store as don't have
// access (or want access) to S3 settings on client
if (Meteor.isClient) {
  var imageStore = new FS.Store.S3("images");
  Images = new FS.Collection("Images", {
    stores: [imageStore],
    filter: {
      allow: {
        contentTypes: ['image/*']
      },
    }
  });
}

Right now my allow rules are:

server/allows.js

Items.allow({
  insert: function(userId, doc){return doc && doc.userId === userId;},
  update: function(userId, doc){ return doc && doc.userId === userId;},
  remove: function(userId, doc) { return doc && doc.userId === userId;},
})

Images.allow({
  insert: function(userId, doc) { return true; },
  update: function(userId,doc) { return true; },
  remove: function(userId,doc) { return true; },
  download: function(userId, doc) {return true;},
});

I'm using Autoform so my form looks like this:

client/item_form.html

<template name="insertItemForm">
  {{#autoForm collection="Items" id="insertItemForm" type="insert"}}
      {{> afQuickField name="name" autocomplete="off"}}
      {{> afQuickField name="image" id="imageFile"}}
      <button type="submit">Continue</button>
  {{/autoForm}}
</template>

Right now when I select browse and select an image it will be in the database and I want to take that _id it has and place it in the Item that is created afterwards, but how do I fetch that particular image? I figured this is a good way to reference an image.

UPDATE 1

Find out the ID is actually located hidden after a file is selected:

<input type="hidden" class="js-value" data-schema-key="image" value="ma633fFpKHYewCRm8">

So I'm trying to get ma633fFpKHYewCRm8 to be placed as a String in the ImageId.

UPDATE 2

Maybe one way is to use FS.File Reference?

Array

Answer 1

I have solved the same problem rather simpler, after file is inserted, I just call a method that does the related collection update:

client.html

<template name="hello">
<p>upload file for first texture:   <input id="myFileInput1" type="file"> </p>
</template>

lib.js

var textureStore = new FS.Store.GridFS("textures");

TextureFiles = new FS.Collection("textures", {
  stores: [textureStore]
});

Textures = new Mongo.Collection("textures");

client.js

Template.hello.events({
        'change #myFileInput1': function(event, template) {
          uploadTextureToDb('first',event);
        }
      });

function uploadTextureToDb(name, event) {
    FS.Utility.eachFile(event, function(file) {
      TextureFiles.insert(file, function (err, fileObj) {
        // Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
        console.log('inserted');
        console.log(fileObj);
        //after file itself is inserted, we also update Texture object with reference to this file
        Meteor.call('updateTexture',name,fileObj._id);
      });
    });
  }

server.js

  Meteor.methods({
    updateTexture: function(textureName, fileId) {
      Textures.upsert(
        {
          name:textureName
        },
        {
          $set: {
            file: fileId,
            updatedAt: Date.now()
          }
        });
    }
  });

as you are using autoForm and simpleSchema, it might not be so easy, but I suggest to you to forget about autoForm and simpleSchema at first and try to make it work with simple html and default collections.

After everything works, you can go back to setting up those, but beware that there might be more issues when it comes to CollectionFS, especially when it comes to styling generated by autoForm.

Lockup