Upload images with gridFS

help
1

I am trying to make an upload images feature on Meteor using GridFS and everything seems to work but I cannot access the files.

I am not sure they were successfully uploaded, but Images and EntriesImages collections are successfully populated with info.

Here’s my code:

// 1. Packages
cfs:standard-packages
cfs:gridfs

// --------------------


// 2. Defining the collections + schema (collections folder)
Images = new Mongo.Collection('images');

EntriesImages = new FS.Collection("EntriesImages", {
   stores: [new FS.Store.GridFS('EntriesImages')]
});

ImagesSchema = new SimpleSchema({
    image: {
        type: String,
        label: "Image"
    },
    author: {
        type: String,
        label: "Author",
        autoValue: function(){
            return this.userId
        },
        autoform: {
            type: "hidden"
        }
    }
});
Images.attachSchema(ImagesSchema);

// --------------------

// 3. Publishing the collections (server folder)
Meteor.publish('images', function(){
    return Images.find({author: this.userId});
});
Meteor.publish('EntriesImages', function(){
    return EntriesImages.find();
});
// --------------------


// 4. Subscribe and upload functionality(client folder)
Meteor.subscribe('images');
Meteor.subscribe('EntriesImages');

Template.addImages.helpers({
    images: ()=> {
        return Images.find({});
    }
});

Template.addImages.events({
    'submit .add-images': function(event, template) {
        // get the image from the form
        var file = $('.imageInput').get(0).files[0];

        // check if img was uploaded
        if(file){
            fsFile = new FS.File(file);

            EntriesImages.insert(fsFile, function(err, fileObj){
                // if there is no error we make an insert
                if(!err){
                    var productImage = '/cfs/files/ProductsImages/' + fileObj._id;
                    Images.insert({
                        image: productImage
                    });
                }
            });

        } else {
            console.log('something bad happend');
        }

        return false;
    }
});

Using this code, my Images collection gets populated with and entry as I would expect:

// sample entry
{
    "_id": "Qp8Hsgki5G9DT2dGz",
    "image": "/cfs/files/ProductsImages/drbbaj7BKzttzzgZX",
    "author": "TMviRL8otm3ZsddSt"
}

and the cfs.EntriesImages.filerecord also gets populated with one entry:

{
  "_id": "x4Sei5sbnFwDii4HE",
  "original": {
    "name": "dash.png",
    "updatedAt": "2015-12-15T14:32:10.000Z",
    "size": 542121,
    "type": "image/png"
  },
  "uploadedAt": "2016-01-18T13:08:34.914Z",
  "copies": {
    "EntriesImages": {
      "name": "dash.png",
      "type": "image/png",
      "size": 542121,
      "key": "569ce3d2e28bd3035ba03735",
      "updatedAt": "2016-01-18T13:08:34.937Z",
      "createdAt": "2016-01-18T13:08:34.937Z"
    }
  }
}

Problem is I still cannot access the image(if it exists at all) using the url that gets saved in the db.

I also tried with insecure and autopublish enabled but it’s still not working…

2

In Mongo, do you see content in the cfs_gridfs.EntriesImages.chunks collection? That’s where the binary data is actually stored, so if you see it there you at least know the file is being saved. How are you trying to access the image - are you using something like cfs:ui to render an image link?

{{#with FS.GetFile "EntriesImages" imageId}}
  <img src="{{this.url}}" alt="Some image">
{{/with}}

If the binary image data is in Mongo, it’s possible you just aren’t referencing the image properly. Try the cfs:ui package approach to make sure.

3

I’m referencing the image path in the img tag like so:
<img src="{{image}}">

I also tried to open the image in a new tab but it’s not working either.

I will take a look at cfs:ui just to be sure.

Thank you :smile:

4

Not working with cfs:ui either.

Also, in mongol, I have a cfs.EntriesImages.filerecord collection not cfs_gridfs.EntriesImages.chunks as you have mentioned.

5

Hello,
Don’t you need to save the path as “/cfs/files/EntriesImages/” + fileObj._id ?

6

Yes, I figured that out earlier but it still not working…

7

Did you property set up the deny and allow rules as explained in the quick start guide ?

8

I only checked the code on github a a few youtube videos. I’ll try to follow that guide.
Thank you.

9

I tested that on a blank project and it works, now I’ll move the code to my app and hope it runs the same.
No idea what I was doing wrong but thank you for the link… I spent the whole day trying to get this to work.

10

i can’t use cfs:ui, i try whit

  {{#each images}}                
                   <img src="{this.url}}">            
  {{/each}}

and work, but i have the probelm with the multiple stores (i stored the original and the thumb) always is the orinal copie, how can retrieve the thumbs?

i try like
{{#with FS.GetFile “images” K9bqMnw37fFQg2RGn}}
Some image
{{/with}}

(the number is a id, but i can’t retriebe nothing