Issue with Meteor.js: Subscription data is not being displayed, only the cursor object is shown

I am encountering an issue with displaying a file record in my template. The only thing that is being returned to the template is the 'cursor' object.

Here is the console.log(file) output from the JS console:

 FilesCollection {collectionName: "Files", downloadRoute: "/cdn/storage", schema: Object, chunkSize: 524288, namingFunction: false…}

I have gone through various posts and resources but it seems that it returns a cursor to the client. However, I am running a Files.findOne() query which ideally should return the record itself to the template or HTML.

'/imports/api/files.js'

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';

export const Files = new FilesCollection({
   collectionName: 'Files',
   allowClientCode: false,
   onBeforeUpload: function (file) {
   if (file.size <= 10485760 && /png|jpg|jpeg/i.test(file.extension)) {
     return true;
   } else {
     return 'Please upload image, with size equal or less than 10MB';
   }
  }
});


if (Meteor.isServer) {
  Meteor.publish('getFile', function(id) {
  return Files.find({_id: id }).cursor;
});
}

'/imports/ui/components/download.js'

import './download.html';

import { Files } from '../../api/files.js';


Template.download.onCreated(function() {
    let self = this;
    self.autorun(function() {
      let fileId = FlowRouter.getParam('id');
      self.subscribe('getFile', fileId);
    });
});

Template.download.helpers({
  file: function () {
    let fileId = FlowRouter.getParam('id');
    let file = Files.findOne({_id: fileId}) || {};
    console.log(file)
    return file;
  }
});

'/imports/ui/components/download.html'

<template name='download'>
    {{#if Template.subscriptionsReady}}
        {{#with file}}
            <a href="{{link}}?download=true" download="{{name}}" target="_parent">
              {{name}}
            </a>
            <p>{{link}}</p>
            <h1>subscriptions are ready!</h1>
            <h2>{{collectionName}}</h2>
        {{/with}}
    {{else}}
      <p>Loading...</p>
    {{/if}}
</template>

Answer №1

One of the silliest errors in the world, always recall: template names in Meteor must be capitalized!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best approach for handling nested conditional statements?

I have a complex set of nested conditional checks that I am working on refining to avoid getting stuck in a nested if{}else{} loop. To provide context, I am dealing with two objects, CACHE_FILE_AGE_LIMIT and CACHE_FILE_CURRENT_AGE, and I am trying to navig ...

Arranging an array of objects by their unique identifiers

Given an array of objects containing root and list elements in a tree structure, how can I efficiently organize them into a tree with an unknown depth? Each object has a parent element ID property. I am currently working on building a menu. While I have s ...

How can I ensure that I always have the most recent MongoDB data being transmitted from main.js to renderer.js?

Currently, I am developing a desktop application using Electron and integrating MongoDB as my data storage solution. My main objective is to automatically update the data being displayed in the front-end whenever there is a change in the MongoDB database. ...

Using jquery to remove textbox value when checkbox is unchecked

I have a single datatable created using jQuery. The first column of the table consists of checkboxes, and the last column contains textboxes. Because these elements are generated dynamically, they end up having identical IDs and names as shown below: $ ...

I'm having trouble understanding why my data does not appear even though there is space allocated for it automatically

I'm facing an issue with my code that is supposed to populate a table with dynamic content using react and ant.design. Everything seems to be working fine, but the actual content is not displaying - only the space for it is created. What's happe ...

Exploring the world of functional programming within nested arrays

I have been shifting towards functional programming over imperative programming recently. Imagine I have a nested array data structure and my goal is to update the values of the innermost arrays. What approach would be most effective? Here is the imperat ...

The onClick event for the OnButtonSubmit function seems to be malfunctioning in ReactJS

When attempting to utilize the onClick event for a button in React, my goal is to simply have it log "clicked" in the console. However, this functionality is not working as expected. The Component where the onClick event is being called looks like this: ...

I am unable to locate the type definition file for 'core-js' at the moment

Currently, I am in the process of developing an application using angular2 along with angular-cli. Surprisingly, angular-in-memory-web-api was not included by default. In order to rectify this, I took the initiative to search for it and manually added the ...

Generating a JSON object through the comparison of two other JSON objects

I need to create a new JSON object called selectedProductAttributes, which is generated by comparing the contents of a second JSON object (selectedProductAttributesNames) with a third object (allProductAttributes). Let me provide some examples to make this ...

Encountering an unidentified JSON path, while the data is clearly visible in the console.log output

I just started using Redux Toolkit and I'm having an issue with rendering data in the UI. The data is showing up successfully in the console, but when I try to display it in the UI, I'm getting an undefined JSON path {${weather[0].description} ${ ...

What is the best method to verify chrome.runtime.onInstalled in Chrome extension testing?

Is there a way to test the chrome.runtime.onInstalled handler? I am developing a Chrome extension that utilizes chrome storage to store specific data. In my upcoming release, I plan on making changes to the data model in chrome storage. To do this effectiv ...

Unable to detect POST action in Firebug or Chrome browser

When I check Firebug or Chrome's development tool, I can't seem to detect a POST ajax request being made. The strange thing is that while I can't see the output of console.log(data) inside the success in Firebug, it does show up in Chrome. ...

Change the value of a boolean cell within my database table

I have a task where I need to dynamically update the status of the show_msg parameter based on user actions. When the submit button is pressed, I want to set it as TRUE if the checkbox is checked, and FALSE if not. The main HTML code includes a popup wind ...

The id property was not properly deserialized in MongoDB using C#

I'm attempting to retrieve a data record from MongoDB using C#. Here is the data stored in the MongoDB collection: { id:0 parameter:"Unscheduled Demand" remarks:"Formula Based" value:89 } The problem: The id property is n ...

redux reducer returns an empty array after applying filter to the state

In my React component, I am utilizing Redux to manage the state. Since I am new to Redux, I have encountered some challenges with one of the reducers I created. One of the methods in my component involves making an HTTP request and then dispatching the dat ...

What is the best way to test the output of HTML code in a unit test scenario

I am new to web development and testing, taking it slow. I have a website with a button that reveals information when clicked. How can I create a test case to ensure that the displayed output is correct? I need to verify that the text appears on the scre ...

Action of Submit Button Based on Field Matching Another Form

I currently have a single page that contains two forms, with only one form being displayed at the moment. The concept is that if the user selects a specific state from the drop-down menu and clicks on the submit button, they will be redirected to either a ...

Show fresh cards added in real-time on the Reactjs interface

I've been working on a project that involves fetching data and showcasing a list of custom-designed card components using map. Everything is functioning properly, but I encountered an issue where adding a new value to the array results in the new card ...

"Obtain a DOM element within an Angular directive by using the jQuery find method

When inspecting the DOM, I can see the element anchor tag present but cannot retrieve it using jquery.find(). The console returns a length of 0, preventing me from initializing angular xeditable on that element. angular.module('built.objects') ...

What is the best method to display an asterisk (*) in red while using React and Material UI

In my form, I want to indicate required fields with a red star (*). Is there a way to display the star in red color? Also, why does the border turn blue when I click on an input field? Here is the code and screenshot for reference: https://codesandbox.io/ ...