Meteor and React Native - FileCollection Access

Question

i posted this question some time ago at the FilesCollection Github Repo (https://github.com/veliovgroup/Meteor-Files), but I'll hope to reach out here anyone who is familiar with Meteor and React Native.

My problem is, that I'm not sure how to use a FilesCollection with React Native (RN) and Meteor.

I used the official Meteor guide to set up a RN app: https://guide.meteor.com/react-native.html

So i have access to @meteorrn/core but how is it now possible for me to access a FileCollection.

Usually you would do this with (on a non-RN-web app):

import { FilesCollection } from "meteor/ostrio:files";
export const ImageDB = new FilesCollection(chosenSettings);

where chosenSettings are some settings might be e.g.

const chosenSettings = {
  collectionName: "Images",
  allowClientCode: false,
  onBeforeUpload(file) {
    if (file.size <= 10485760 && /png|jpg|jpeg/i.test(file.extension)) {
      return true;
    }
    return "Please upload image, with size equal or less than 10MB";
  },
  storagePath: `${process.env.PWD}/images`,
};

However, with RN it is not possible to access FilesCollection from meteor/ostrio:files as I don't have any meteor relation here

With other collections I can use Mongo.Collection from @meteorrn/core, however this is not possible with FilesCollection:

const collection = new Mongo.Collection("myCollection");

Any suggestions?

Answer 1

There is no "out-of-the-box" solution, as there is no FilesCollection on the RN client available. However, you could create a workaround strategy using a Meteor method.

1. Create a publication for the FilesCollection's underlying collection:

server

Meteor.publish('imagesForRN', function () {
  return ImageDB.collection.find({}) // note the Mongo.collection is accessible here
})

2. Create a Method to resolve links:

server

Meteor.methods({
  resolveRNLinks ({ ids }) {
    return ImageDB.collection
      .find({ _id: { $in: ids}})
      .map(linkImage);
  }
})

const linkImage = function (fileRef) {
  const url = Images.link(fileRef, 'original', Meteor.absoluteUrl())
  return { _id: fileRef._id, url }
}

3. Get the URLS of the subscribed docs

This assumes you have subscribed to the Image Collection as shown in the guide.

client

import Meteor from '@meteorrn/core'

const MyComponent = props => {
  const { loading, myTodoTasks } = this.props;

  useEffect(() => {
    const ids = myTodoTasks.map(doc => doc._id)
    // note, you should filter those ids, which you have already
    // resolved so you only call for the new ones
    Meteor.call('resolveRNLinks', { ids }, (err, urls) => {
      // store urls in state or ref, depending on your usecase
    })
  })
}

Resources

• https://github.com/TheRealNate/meteor-react-native
• https://github.com/veliovgroup/Meteor-Files/blob/master/docs/collection.md
• https://github.com/veliovgroup/Meteor-Files/blob/master/docs/link.md