FS.File.url() returns null?

help
1

I am saving a text file to a Files collection (CollectionFS) only to read it back immediately to parse and display it’s content. Saving to the collection is fine - the files are saved server side and the content is OK. Reading back any file, but the last file is also OK. For the last file file.url() returns null even if file is an instance of FS.File. What do I do?

/* globals Meteor HTTP */

import React from 'react';
import PropTypes from 'prop-types';
import { withTracker } from 'meteor/react-meteor-data';
import Files from '../../imports/api/files.collection';
import ParseDaVinci from '../../imports/utils/parse_davinci.util';
import FileUpload from '../../client/components/file_upload.component';
import Selector from '../../client/components/selector.component';
import Table from '../../client/components/table.component';

const ROWS = 16;
const COLS = 24;

const handleOnSelect = () => {};

const generateColumns = (cols) => {
  const columns2 = [];

  columns2.push({
    Header: '',
    accessor: 'head',
    width: 'auto',
    border: 'none',
    style: { backgroundColor: '#dadada' },
  });

  for (let i = 0; i < cols; i += 1) {
    const char = (i + 1).toString();

    columns2.push({
      Header: char,
      accessor: char,
      width: 'auto',
    });
  }

  return columns2;
};

const generateData = (rows, cols) => {
  const rows2 = [];
  const asciiBase = 65;

  for (let i = 0; i < rows; i += 1) {
    const char = String.fromCharCode(i + asciiBase);
    const object = {};
    object.head = char;

    for (let j = 0; j < cols; j += 1) {
      object[j + 1] = Math.round(1000 * Math.random()).toString();
    }

    rows2.push(object);
  }

  return rows2;
};

class Import extends React.Component {
  constructor() {
    super();

    this.state = {
      droppedFile: false,
      fileId: false,
      parsed: false,
    };

    this.handleOnDrop = this.handleOnDrop.bind(this);
    this.handleOnSelect = handleOnSelect.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (this.state.fileId && nextProps.filesReady) {
      this._loadData();
    }
  }

  /**
   * Event handler for files dropped on Dropzone.
   * @param {Array} files List of File objects from a dropzone.
   */
  handleOnDrop(files) {
    if (files.length === 0) {
      return;
    }

    const droppedFile = files[0];

    this.setState({ droppedFile: droppedFile.name });

    Files.insert(droppedFile, (err, fileObj) => {
      if (err) {
        console.log(err);
      }

      console.log(`Saved file with id: ${fileObj._id}`);

      this.setState({ fileId: fileObj._id });
    });
  }

  _loadData() {
    const file = this.props.files[0];
    const fileName = file.original.name;
    const fileId = file._id;
    const barcode = fileName.split('.')[0];

    console.log(`Loading file: ${fileName} with id: ${fileId}`);

    this.setState({ barcode, parsed: false });

    console.log(file.url());

    if (fileId === this.state.fileId) {
      HTTP.get(file.url(), (err, result) => {
        console.log('HTTP Getting');
        console.log(result.content);
        if (!err) {
          const plateData = new ParseDaVinci(result.content);

          this.setState({ plateData, parsed: true });

          console.log(plateData);
        }
      });
    }

    this.setState({ fileId: false });
  }

  render() {
    const data = generateData(ROWS, COLS);
    const columns = generateColumns(COLS);

    if (!this.props.filesReady) {
      return <div>Loading ...</div>;
    }

    return (
      <div className="import">
        <FileUpload file={this.state.droppedFile} handleOnDrop={this.handleOnDrop} />
        { this.state.parsed && (
          <div>
            <Selector
              label={this.state.barcode}
              values={this.state.plateData.sectionNames}
              value={this.state.plateData.sectionNames[0]}
              handleOnSelect={this.handleOnSelect}
              disabled={false}
            />
            <Table data={data} columns={columns} />
          </div>
        )}
      </div>
    );
  }
}

Selector.propTypes = {
  handleOnSelect: PropTypes.func.isRequired,
};

Import.propTypes = {
  filesReady: PropTypes.bool.isRequired,
  files: PropTypes.arrayOf(PropTypes.object).isRequired,
};

const fileSubscription = () => {
  const filesSub = Meteor.subscribe('allFiles');

  return {
    filesReady: filesSub.ready(),
    files: Files.find({}, {
      sort: { uploadedAt: 1 },
    }).fetch(),
  };
};

export default withTracker(fileSubscription)(Import);