UploadFS subscription issue


#1

Running into an error when trying to subscribe to my collection created with UploadFS in my React Component.

Anybody else running into this on Meteor 1.4? Looks like an issue with matb33:collection-hooks.

I20160927-10:40:42.382(-7)? Exception from sub advisorLogos id uPWJbzaEk55uHMc2K ReferenceError: AdvisorsLogos is not defined I20160927-10:40:42.556(-7)? at Subscription.<anonymous> (server/main.js:41:12) I20160927-10:40:42.558(-7)? at packages/matb33_collection-hooks/collection-hooks.js:281:1 I20160927-10:40:42.559(-7)? at [object Object]._.extend.withValue (packages/meteor/dynamics_nodejs.js:56:1) I20160927-10:40:42.559(-7)? at Subscription._handler (packages/matb33_collection-hooks/collection-hooks.js:280:1) I20160927-10:40:42.560(-7)? at maybeAuditArgumentChecks (packages/ddp-server/livedata_server.js:1711:12) I20160927-10:40:42.560(-7)? at Subscription._runHandler (packages/ddp-server/livedata_server.js:1026:17) I20160927-10:40:42.561(-7)? at Session._startSubscription (packages/ddp-server/livedata_server.js:845:9) I20160927-10:40:42.561(-7)? at Session.sub (packages/ddp-server/livedata_server.js:617:12) I20160927-10:40:42.562(-7)? at packages/ddp-server/livedata_server.js:551:43


#2

What is AdvisorsLogos - are you sure it’s defined and accessible from the server?


#3

I can upload to it no problem and all the images are there. I just want to be able to display a thumbnail…

server/main.js

import { AdvisorLogos, AdvisorLogosStore } from '../imports/collections/advisorLogos';

Meteor.startup(() => {
  Meteor.publish('advisorLogos', function() {
    return AdvisorsLogos.find({});
  });
  
  Meteor.publish('advisorLogosStore', function() {
    return AdvisorsLogosStore.find({});
  });
});

imports/collections/advisorLogos.js

import { Mongo } from 'meteor/mongo';
import { UploadFS } from 'meteor/jalik:ufs';

Meteor.methods({
  
});

export const AdvisorLogos   = new Mongo.Collection('advisorLogos');
export const Thumbnails128  = new Mongo.Collection('thumbnails-128');
export const Thumbnails64   = new Mongo.Collection('thumbnails-64');

export const AdvisorLogosStore = new UploadFS.store.GridFS({
  collection: AdvisorLogos,
  name: 'advisorLogos',
  chunkSize: 1024 * 255,
  filter: new UploadFS.Filter({
    minSize: 1,
    maxSize: 1024 * 1000,
    contentTypes: ['image/*'],
    extensions: ['jpg', 'png']
  })
  ,
  copyTo: [
    Thumbnail128Store,
    Thumbnail64Store
  ]
});

export const Thumbnail128Store = new UploadFS.store.GridFS({
  collection: Thumbnails128,
  name: 'thumbnails-128',
  chunkSize: 1024 * 255,
  filter: new UploadFS.Filter({
    minSize: 1,
    maxSize: 1024 * 1000,
    contentTypes: ['image/*'],
    extensions: ['jpg', 'png']
  }),
  transformWrite: function(readStream, writeStream, fileId, file) {
    let gm = Npm.require('gm');
    if (gm) {
      gm(from)
        .resize(128, 128)
        .gravity('Center')
        .extent(128, 128)
        .quality(75)
        .stream().pipe(to);
    } else {
      console.error("gm is not available", file);
    }
  }
});

export const Thumbnail64Store = new UploadFS.store.GridFS({
  collection: Thumbnails64,
  name: 'thumbnails-64',
  chunkSize: 1024 * 255,
  filter: new UploadFS.Filter({
    minSize: 1,
    maxSize: 1024 * 1000,
    contentTypes: ['image/*'],
    extensions: ['jpg', 'png']
  }),
  transformWrite: function(readStream, writeStream, fileId, file) {
    let gm = Npm.require('gm');
    if (gm) {
      gm(from)
        .resize(64, 64)
        .gravity('Center')
        .extent(64, 64)
        .quality(75)
        .stream().pipe(to);
    } else {
      console.error("gm is not available", file);
    }
  }
});

client/component/logoUpload.jsx

import React, { Component } from 'react';
import { UploadFS } from 'meteor/jalik:ufs';
import { Button } from 'react-materialize';
import { createContainer } from 'meteor/react-meteor-data';
import { AdvisorLogos, AdvisorLogosStore } from '../../../imports/collections/advisorLogos';

class LogoUpload extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  
  render() {
    return (
      <div>
        <Button waves='light' onClick={this.handleClick}>Upload a Logo</Button>
        // Create image of thumbnail
      </div>
    );
  }
  
  handleClick(event) {
    event.preventDefault();
    
    UploadFS.selectFiles(function(file) {
      let photo = {
        name: file.name,
        size: file.size,
        type: file.type
      };
      
      let worker = new UploadFS.Uploader({
        store: 'advisorLogos',
        data: file,
        file: photo,
        onError: function(err) {
          console.log(err);
        },
        onComplete: function(file) {
          console.log(file.name + ' has been uploaded');
        },
        onProgress: function(file, progress) {
          console.log(file.name + ' ' + (progress * 100) + '% uploaded');
        },
        onStart: function(file) {
          console.log(file.name + ' started');
        },
        onStop: function(file) {
          console.log(file.name + ' stopped');
        }
      });
      
      worker.start();
    });
  }
}

export default createContainer(() => {
  const logosHandler = Meteor.subscribe("advisorLogos");
  const loading = !(logosHandler.ready());
  const logos = AdvisorLogos.findOne({ ownedBy: Meteor.userId() });
  const exists = !loading && !!logos;
  
}, LogoUpload);

#4

I had an extra s… So dumb…