Meteor-files: Collection not defined

Created on 1 Dec 2016 · 3Comments · Source: veliovgroup/Meteor-Files

I have a problem with FilesCollection not working properly.
It seems that the new 'FilesCollection' that I created is not defined on the client side for some strange reason. When I try to import the collection directly, the kadira:flowrouter throws me an error.

To be more specific:
My file structure:

/.meteor
/client
---FileUpload.jsx
/collections
---Files.js
/node_modules
/public
---/uploads
/server

For the shared code in Files.js:

import { FilesCollection } from 'meteor/ostrio:files';

var Files = new FilesCollection({
  collectionName: 'Files',
  allowClientCode: false, // Disallow remove files from Client
  storagePath: "./../public/uploads",
  onBeforeUpload: function (file) {
    // Allow upload files under 10MB, and only in png/jpg/jpeg formats
    if (file.size <= 10485760 && /png|jpg|jpeg|mp3|gif|wav/i.test(file.extension)) {
      return true;
    } else {
      return 'Please upload image, with size equal or less than 10MB';
    }
  }
})

And for FileUpload.jsx:

import React, {Component} from 'react';
import {Meteor} from 'meteor/meteor';

export default class FileUpload extends Component {

    onUpload(event) {
        if (event.currentTarget.files && event.currentTarget.files[0]) {
              // We upload only one file, in case
              // multiple files were selected
              var upload = Files.insert({
                file: event.currentTarget.files[0],
                streams: 'dynamic',
                chunkSize: 'dynamic'
              }, false);

              upload.start();
        }
    }

    render() {
        return (
            <div>
                <input type="file" onChange={this.onUpload.bind(this)} />
            </div>
        )
    }

}

Then the console throws me an error: 'ReferenceError: Files is not defined'.
One thing that I do know for sure is that the collection is PRESENT because it shows up in Mongol.
If I import 'var Files' directly using 'import' Flowrouter throws me an error....
Please help me with this issue, I've been working on it for hours and can't figure out why it's doing this.

question

Source

RE-N-Y

Most helpful comment

Files is undefined, because u use var, its not a global var.

try remove var or import / require

Files = new FilesCollection({
  collectionName: 'Files',
  allowClientCode: false, // Disallow remove files from Client
  storagePath: "./../public/uploads",
  onBeforeUpload: function (file) {
    // Allow upload files under 10MB, and only in png/jpg/jpeg formats
    if (file.size <= 10485760 && /png|jpg|jpeg|mp3|gif|wav/i.test(file.extension)) {
      return true;
    } else {
      return 'Please upload image, with size equal or less than 10MB';
    }
  }
})

export default Files

import React, {Component} from 'react';
import {Meteor} from 'meteor/meteor';

import Files from './where your export your files'

export default class FileUpload extends Component {

    onUpload(event) {
        if (event.currentTarget.files && event.currentTarget.files[0]) {
              // We upload only one file, in case
              // multiple files were selected
              var upload = Files.insert({
                file: event.currentTarget.files[0],
                streams: 'dynamic',
                chunkSize: 'dynamic'
              }, false);

              upload.start();
        }
    }

    render() {
        return (
            <div>
                <input type="file" onChange={this.onUpload.bind(this)} />
            </div>
        )
    }

}

crapthings on 8 Dec 2016

👍2

All 3 comments

Files is undefined, because u use var, its not a global var.

try remove var or import / require

Files = new FilesCollection({
  collectionName: 'Files',
  allowClientCode: false, // Disallow remove files from Client
  storagePath: "./../public/uploads",
  onBeforeUpload: function (file) {
    // Allow upload files under 10MB, and only in png/jpg/jpeg formats
    if (file.size <= 10485760 && /png|jpg|jpeg|mp3|gif|wav/i.test(file.extension)) {
      return true;
    } else {
      return 'Please upload image, with size equal or less than 10MB';
    }
  }
})

export default Files

import React, {Component} from 'react';
import {Meteor} from 'meteor/meteor';

import Files from './where your export your files'

export default class FileUpload extends Component {

    onUpload(event) {
        if (event.currentTarget.files && event.currentTarget.files[0]) {
              // We upload only one file, in case
              // multiple files were selected
              var upload = Files.insert({
                file: event.currentTarget.files[0],
                streams: 'dynamic',
                chunkSize: 'dynamic'
              }, false);

              upload.start();
        }
    }

    render() {
        return (
            <div>
                <input type="file" onChange={this.onUpload.bind(this)} />
            </div>
        )
    }

}

crapthings on 8 Dec 2016

👍2

Hello @RE-N-Y

Is this issue solved? Looks like solution by @crapthings is correct.
Anyways, you can always check if variable is in global scope - by simply typing variable name into browser console.