Updated example

example/mobile/app/App.js

@@ -19,7 +19,10 @@ export default class App extends Component {
     };
   }
   componentWillMount() {
-    const url = 'http://'+(this.props.serverUrl || '127.0.0.1')+':3000/websocket';
+    console.info('------');
+    console.info('------');
+
+    const url = 'http://'+(this.props.serverUrl || '192.168.1.139')+':3000/websocket';
     Meteor.connect(url);
 
     Meteor.ddp.on('connected', function() {

example/mobile/app/Routes/CollectionFS.js

@@ -6,6 +6,7 @@ console.disableYellowBox = true;
 import React, {
   Component,
   StyleSheet,
+  Image,
   Text,
   View
 } from 'react-native';
@@ -17,10 +18,30 @@ import Button from 'react-native-button';
 
 @connectMeteor
 export default class CollectionFS extends Component {
+  startMeteorSubscriptions() {
+    Meteor.subscribe('imagesFiles');
+  }
+  getMeteorData() {
+    return {
+      image: Meteor.FSCollection('imagesFiles').findOne()
+    }
+  }
   render() {
+    const { image } = this.data;
+
+    console.log(image && image.url());
     return (
       <View style={styles.container}>
+        <Text>You have to be logged to see this image (see publish method). CollectionFS url() generate an authToken and it is checked in this example.</Text>
+
+        {image &&
+          <Image
+            style={{height: 400, width: 400}}
+            source={{uri: image.url({store: 'anotherStore'})}}
+          />
+        }
 
+        <Image />
       </View>
     );
   }

example/mobile/app/Tabs.ios.js

@@ -19,7 +19,7 @@ export default class Tabs extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      selectedTab: 0
+      selectedTab: 1
     };
   }
   selectTab(index) {

example/mobile/ios/mobile/AppDelegate.m

@@ -31,7 +31,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
    * on the same Wi-Fi network.
    */
 
-  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
+  jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.139:8081/index.ios.bundle?platform=ios&dev=true"];
 
   /**
    * OPTION 2

example/web/app/collections/images_files.js

@@ -0,0 +1,17 @@
+
+const ImagesFiles = new FS.Collection("imagesFiles", {
+  stores: [
+    new FS.Store.GridFS("imagesFiles"),
+    new FS.Store.GridFS("anotherStore")
+  ]
+});
+
+const allow = function(userId) {
+  return !!userId;
+};
+
+ImagesFiles.allow({
+  download: allow
+});
+
+export default ImagesFiles;

example/web/app/collections/index.js

@@ -2,4 +2,5 @@
 
 export const Users = Meteor.users;
 export const Todos = require('./todos');
+export const ImagesFiles = require('./images_files');
 export const Settings = new Mongo.Collection('settings');

example/web/app/components/Header.jsx

@@ -18,6 +18,9 @@ export default class Header extends Component {
             <NavItem eventKey={1} onClick={()=>{browserHistory.push('/todos')}}>
               Todos
             </NavItem>
+            <NavItem eventKey={1} onClick={()=>{browserHistory.push('/image')}}>
+              CollectionFS
+            </NavItem>
           </Nav>
         </Navbar.Collapse>
       </Navbar>

example/web/app/components/Routes/ImageFile.jsx

@@ -0,0 +1,23 @@
+/* global ReactMeteorData */
+import React, {Component} from 'react';
+import reactMixin from 'react-mixin';
+
+import { ImagesFiles } from 'collections';
+
+@reactMixin.decorate(ReactMeteorData)
+export default class TodosComponent extends Component {
+  getMeteorData() {
+    return {
+      image: ImagesFiles.findOne()
+    };
+  }
+  render() {
+    const { image } = this.data;
+    console.log(image);
+    return (
+      <div>
+        <img src={image && image.url({store: 'anotherStore'})} alt=""/>
+      </div>
+    );
+  }
+}

example/web/app/fixtures.js

@@ -1,5 +1,7 @@
 /* global Accounts */
 
+import { Settings, ImagesFiles } from 'collections';
+
 export function createUsers() {
   console.log('Creating fake users');
   ['User'].forEach(function(name) {
@@ -11,10 +13,15 @@ export function createUsers() {
   });
 }
 
-import { Settings } from 'collections';
-
 export function createSettings() {
   Settings.insert({
     param1: 'react-native-meteor'
   });
+}
+
+
+export function createImages() {
+  const imageFile = new FS.File(Npm.require('fs').realpathSync(__meteor_bootstrap__.serverDir+'/../../../../../../app/opengraph.png'));
+  ImagesFiles.insert(imageFile);
+
 }

example/web/app/main_client.js

@@ -5,12 +5,13 @@ import { Router, Route, browserHistory } from 'react-router';
 import App from './components/App.jsx';
 import Home from './components/Routes/Home.jsx';
 import Todos from './components/Routes/Todos.jsx';
+import ImageFile from './components/Routes/ImageFile.jsx';
 
 Accounts.ui.config({
   passwordSignupFields: 'USERNAME_ONLY',
 });
 
-import publications from './publications/todos';
+import publications from './publications';
 publications();
 
 Meteor.startup(() => {
@@ -20,6 +21,7 @@ Meteor.startup(() => {
         <Router history={browserHistory}>
           <Route path="/" component={Home}/>
           <Route path="todos" component={Todos}/>
+          <Route path="image" component={ImageFile}/>
         </Router>
       </App>
     ), document.getElementById('root')

example/web/app/main_server.js

@@ -2,16 +2,16 @@ import React from 'react';
 //import {Posts} from './collections';
 //import {createPosts, createUsers} from './fixtures';
 import './methods';
-import { createUsers, createSettings } from './fixtures';
+import { createUsers, createSettings, createImages } from './fixtures';
 
-import todos from './publications/todos';
-import settings from './publications/settings';
-todos();
-settings();
+import publications from './publications';
+publications();
 
 if(Meteor.users.find().count()===0) {
   createUsers();
   createSettings();
+  createImages();
 }
 
+
 console.log('\n\nRunning on server only');;

example/web/app/publications/imagesFiles.js

@@ -0,0 +1,13 @@
+import { ImagesFiles } from '../collections';
+
+export default function() {
+  if (Meteor.isClient) {
+    Meteor.subscribe('imagesFiles');
+  }
+
+  if (Meteor.isServer) {
+    Meteor.publish('imagesFiles', function() {
+      return ImagesFiles.find({});
+    });
+  }
+};

example/web/app/publications/index.js

@@ -0,0 +1,9 @@
+import imagesFiles from './imagesFiles';
+import settings from './settings';
+import todos from './todos';
+
+export default function() {
+  imagesFiles();
+  todos();
+  settings();
+};

example/web/meteor_core/.meteor/packages

@@ -25,3 +25,5 @@ mindfront:why-reminify
 aldeed:simple-schema
 aldeed:collection2
 reactjs:react
+cfs:standard-packages
+cfs:gridfs

example/web/meteor_core/.meteor/versions

@@ -19,6 +19,23 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
+cfs:[email protected]
 [email protected]
 [email protected]
 [email protected]
@@ -55,6 +72,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
+[email protected]
 [email protected]_2
 [email protected]_1
 [email protected]