How to output the image i uploaded using Meteor-Files?

help
1

i use this https://github.com/VeliovGroup/Meteor-Files to upload the file but i dont have a clue on how to render it using image tag…

main.html

<head>
  <title>uploadImage</title>
</head>

<body>
  {{> renderImage}}
  {{> uploadForm}}
</body>

<template name="uploadForm">
  {{#with currentUpload}}
    Uploading <b>{{file.name}}</b>:
    <span id="progress">{{progress.get}}%</span>
  {{else}}
    <input id="fileInput" type="file" />
  {{/with}}
</template>

<template name="renderImage">
	<img src="{{myImage}}" alt="">
</template>

main.js

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

const Images = new FilesCollection({
  collectionName: 'Images',
  allowClientCode: false, // Disallow remove files from Client
  onBeforeUpload(file) {
    // Allow upload files under 10MB, and only in png/jpg/jpeg formats
    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.isClient) {
  Meteor.subscribe('files.images.all');
}

if (Meteor.isServer) {
  Meteor.publish('files.images.all', function () {
    return Images.find().cursor;
  });
}

Template.renderImage.helpers({
  myImage(){
    return Images.find();
  }
});
2

First your renderImage helper returns a cursor so in your “renderImage” template you have to iterate with #each, or for your test just use findOne and #with.
Then access to the image src with image.link
Second if you want the full URL for use in src you can use link to create a downloadable link

Template.renderImage.helpers({
  myImage(){
    return Images.findOne({}).link();
  }
});
3

I am using the same to upload the files.
I have “choices” collection which have each choice with image.
I have published the images file
pub.js (server side)

Meteor.publish(‘files.images.all’, function () {
return Images.find().cursor;
});

main.html

{{#each choices}}
{{> choice}}
{{/each}}

{{name}}

main.js
Template.main.onCreated(function{
this.subscribe(‘Choices’);
});

Template.choice.onCreated(function(){
this.subscribe(‘files.images.all’);
});

Template.choice.helpers({
getImage(id) {
return Images.findOne({_id:id}).link();
}
});

I get Exception in template helper: getImage.

What I want is I have to display all the choices with their image & names.
I have the choices collections with data schema like
{name:“some choice”, featured_image:{ _id:“KcLkabv2wPiSwLpm6” }}
I am trying to get the link of the image by passing the ID to image collection.

How can I achieve this?
Is my approach is wrong?

I am new to meteor.

4

which Exception ? please provide detailled exception information
Please use quotes to put your code in good shape when posting… otherwise it’s difficult to read …

5

Thank you for your concern. I’m sorry for my messy content. Will Improve on my next post.

I raised a new topic which is detailed & got solutions on my own itself.
Follow it here Viewing Uploaded image in meteor-files