Issues with CollectionFS

Hi everyone,

I’m quite new to Meteor but really enjoying using it! It almost feels like cheating, it’s so easy to do so much.

However, it’s not all sunshine and rainbows. I’ve run into a problem with CollectionFS and gridFS. I want my users to upload their avatar and be able to change it. But I can’t seem to get any kind of upload to work?

Here’s my code so far, any pointers or (preferably) any example code would be greatly appreciated!:

/server/images.js

var avatarStore = new FS.Store.GridFS("avatars");

Avatars = new FS.Collection("avatars", {
  stores: [avatarStore]
});

/client/app.js

var avatarStore = new FS.Store.GridFS("avatars");

Avatars = new FS.Collection("avatars", {
  stores: [avatarStore]
});

Template.editProfile.events({
      'change #avatarUp': function(event, template) {
	   FS.Utility.eachFile(event, function(file) {
           Avatars.insert(file, function (err, fileObj) {
                if (err){
                // handle error
                } else {
                // handle success depending what you need to do
                var userId = Meteor.userId();
                var avatarURL = {
                    "profile.avatar": "/cfs/files/images/" + fileObj._id
                };
                Meteor.users.update(userId, {$set: avatarURL});
                }
            });
	   });
    }
});

To be honest, I feel like I don’t fully understand the way CollectionFS works. That’s partly down to the documentation though, as I feel I have a grasp of Meteor as a whole to be honest.

It’s worth mentioning that if I run the command: Meteor.user().profile.avatar; in the console I do get a return of “/cfs/files/images/JQzMbq7YcCfQRaxT6” as an example. So something is working, I just don’t know from here how to retrieve anything.

Last but not least, when I do try upload anything I get this error in the console:
“The provided value ‘undefined’ is not a valid enum value of type XMLHttpRequestResponseType.”

Again, any help would be greatly appreciated! I’m sure most of you are a lot better at this than I am.

Cheers,

Tom.

You just need to set the security settings:

Avatars.allow({
  download: function(userId, fileObj) {
    return true;
  }
});

Also, The provided value 'undefined' is not a valid enum value of type XMLHttpRequestResponseType. is a bug with the HTTP code within collectionfs and it has a pr waiting to fix it. It only warns on chrome. You can ignore it.

1 Like

Thanks for the reply!

And then to retrieve the avatar set to a profile, what would I then do? This?:smile:

return Meteor.user().profile.avatar

I expect that would just return an empty object though. I’m at work right now so I can’t check!

Once again thanks for you help :smile:

No problem :smile:

And well, if Meteor.user().profile.avatar returns the url in the console as you mentioned in your first message, then it will definitely populate your image src

<img src="{{currentUser.profile.avatar}}" class="circle avatar"/>
1 Like

You sir, are a gentleman and a scholar!

Looks like it should work. Many thanks, will give this a bash later on today :smile:

1 Like

hah, discourse does indeed have a blush thingy :blush:

1 Like

Well I’m back!

So, I did everything you suggested and this is what I get now:

"GET http://localhost:3000/cfs/files/images/D5iTwXyhX22MsjN4b 404 (Not Found)"

I assume this is because it’s not retrieving any image? I feel I’m getting there now though!

Hmm, could you also try setting insert/update allow rules as well as download, and then upload a new file to see if you can download that one.

I got it to work! Like a complete idiot, I was uploading the images into /cfs/files/images/ instead of /cfs/files/avatars/ like the name of my store. It’s now working an absolute treat!

Many thanks for your help again, everything you suggested did work. It was just me being a dough-brain :joy:

Works really well actually, impressed :thumbsup:

1 Like

I’m glad it worked out! It’s a good thing to make all those careless mistakes. It makes one feel so bad they actually do better next time :smile:

The provided value 'undefined' is not a valid enum value of type XMLHttpRequestResponseType. 

breaks mobile uploads when you port your site to android.