First query returns 503 for the newly uploaded image in Meteor GridFS
Can anyone tell me why this error is happening and how to solve it? When I reload the page (cmd + r) the image request works just fine.
Error in browser console:
http://xxxxx.meteor.com/cfs/files/images2/aEaqKMjLQZcDPHLS8 503 (service not available)
What's happening:
- Loading an image (gridFS)
- URL added to user profile
- img src = "{{imgsrc}}" is being re-updated, so the HTTP request.
- Request URL is correct, but the result is 503
- Reload the page and the error disappears.
Code to load image
Template.profileedit.events({
'change .myFileInput': function(event, template) {
var files = event.target.files;
for (var i = 0, ln = files.length; i < ln; i++) {
Images.insert(files[i], function (err, fileObj) {
var userId = Meteor.userId();
var imagesURL = {
"profile.image": "/cfs/files/images2/" + fileObj._id
};
Meteor.users.update(userId, {$set: imagesURL});
});
}
}
Template Helper
Template.profileedit.helpers({
imgsrc: function() {
var user = Meteor.users.findOne({"_id" : Meteor.userId()});
return Meteor.user().profile.image;
}
});
HTML that renders the image:
<template name="profileedit">
<img src="{{imgsrc}}" style="width:400px" >
</template>
Other things
The problem is the same both locally and on meteor.com insecure and automatic posting (these are just the learning steps)
Thanks Jesper
source to share
I would guess that you are facing an issue where Mongo is not yet ready to restore the object. My guess is that reactive refresh happens before your image is actually retrievable, but by the time you hit refresh it is there and ready to be retrieved, so the work around is working.
There are several ways to get around this. For example: https://github.com/CollectionFS/Meteor-CollectionFS basically allows you to set a "Pending" image to be displayed until your file is ready and will respond to refresh when your image is restored. You can do this on your own and also demonstrate your implementation.
source to share