CODEWITHSUNDEEP
javascriptmeteorgridfs
Jesper Ordrup
Jesper Ordrup

Reputation: 156

First request returns 503 for just uploaded image to Meteor GridFS

Can anyone tell me why this error happens and how to solve it? When I reload the page (cmd+r) the image request works just fine.

The error from browser console:

http://xxxxx.meteor.com/cfs/files/images2/aEaqKMjLQZcDPHLS8 503 (Service Unavailable)

What happens:

  1. Image is uploaded (gridFS)
  2. url is added to user profile
  3. img src="{{imgsrc}}" is reactivly updated, thus a http request.
  4. request url is correct but result is 503
  5. Reloading page and the error goes away.

Code for uploading 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 displays the image:

<template name="profileedit">
  <img src="{{imgsrc}}" style="width:400px" >
</template>

Other stuff

Problem is the same both locally and on meteor.com insecure and autopublish is active (this is just learning steps)

Thanks Jesper

Upvotes: 3

Views: 917

Answers (1)

Tim C
Tim C

Reputation: 1934

I would imagine that you are running into a problem where Mongo is not ready to retrieve the object yet. My guess is that the reactive update is happening before your image is actually available for retrieval, but by the time you hit refresh it is there and ready to be retrieved, which is why that work around works.

There are a few ways around this. For example: https://github.com/CollectionFS/Meteor-CollectionFS basically allows you to set a "Waiting" image which will display while your file is not ready and will reactively update when your image is set to be retrieved. You could do this on your own with your implementation shown as well.

Upvotes: 2

Related Questions