[id10t] Photos don't save on server

help
1

I have provided my code below. I’m trying to use cordova-plugin-camera-preview module to capture images associated with a form.

All of the code works on localhost (meteor run android-device), but doesn’t run on the server (meteor build …). The server is a digital ocean droplet running nginx to proxy requests.

It looks to me like the Photo can not be added to the Photos collection on the server side. When I click the “Take Picture” button, it briefly flashes the picture in my photosTaken template and then goes away.

Any ideas why my Photos won’t save?

I have the following two templates:

<template name="camera">
  <div id="camera-preview"></div>
  <div class="controls">
    <div style="width: 100%; text-align: center; margin-top: 4px;">
      <a href="#" class="btn btn-primary" id="openCamera">Open Camera</a>
      <a href="#" class="btn btn-primary" id="takePhoto">Take Photo</a>
      <a href="#" class="btn btn-default" id="closeCamera">Close Camera</a>
    </div>
  </div>
</template>

<template name="photosTaken">
  <div id="photoContainer">
  {{#if isPhotosPresent}}
    {{#each getPhotos}}
    <div style="width: 100%; text-align: center; margin-top: 10px;">
      <p>
        <div style="float: right;"><a href="#" class="btn btn-danger btn-xs delete-photo"><span photoid="{{_id}}" class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></div>
        <img src="data:image/jpeg;base64,{{data}}" style="width: 100%"/>
      </p>
      <p>
        <div style="float: right;"><a href="#" class="btn btn-sm save-caption"><span photoid="{{_id}}" class="glyphicon glyphicon-ok" aria-hidden="true"></span></a></div>
        <textarea id="{{_id}}" rows="2" style="width: 80%;">{{caption}}</textarea>
      </p>
    </div>
    {{/each}}
  {{else}}
    <div  style="width: 100%; text-align: center; margin-top: 10px;">No photos</div>
  {{/if}}
</div>
</template>

I use these templates as such in main.html:

{{#if isMobile}} {{> camera}} {{/if}}
{{> photosTaken}}

and I have the following javascript in camera.js:

Template.photosTaken.helpers({
  getPhotos: function() {
    return Photos.find().fetch();
  },
  isPhotosPresent: function() {
    if(Photos.find().count() > 0)
      return true;
    return false;
  },
  numberofphotos: function() {
    return Photos.find().count();
  }
});

Template.photosTaken.events({
  'click .delete-photo': function(e) {
    e.preventDefault();
    Meteor.call('deletePhoto', $(e.target).attr('photoid'));
  },
  'click .save-caption': function(e) {
    e.preventDefault();
    photo_id = $(e.target).attr('photoid');
    new_caption = $("#"+photo_id).val();
    Meteor.call('updatePhotoCaption', photo_id, new_caption);
  }
});

Template.photosTaken.onCreated(function() {
  if(Session.get('selected_form_id') && Session.get('selected_form_id') != "")
    Meteor.subscribe('photos', Session.get('selected_form_id'));
});

Template.camera.onRendered(function() {
  $("#takePhoto").hide();
  $("#closeCamera").hide();
});

Template.camera.events({
  'click #closeCamera': function(){
    CameraPreview.stopCamera();
    $("#takePhoto").hide();
    $("#closeCamera").hide();
    $("#openCamera").show();
  },
  'click #openCamera': function(){
    CameraPreview.startCamera({x: 0, y:0, width: 640, height: 480, tapPhoto: true, camera: CameraPreview.CAMERA_DIRECTION.BACK }, function(imgData){
      $("#openCamera").hide();
      $("#closeCamera").show();
      $("#takePhoto").show();
    });
  },
  'click #takePhoto': function(){
    CameraPreview.takePicture({width: 1280, height: 960, quality: 85 }, function(imgData){
      var new_photo = {
        data: imgData,
        caption: "No caption added",
        form_id: Session.get("selected_form_id")
      }
      Meteor.call('createPhoto', new_photo);
      //$('#originalPicture').attr("src", 'data:image/jpeg;base64,' + imgData);
      CameraPreview.stopCamera();
      $("#takePhoto").hide();
      $("#closeCamera").hide();
      $("#openCamera").show();
    });
  }
});
2

It was a subscription problem. Sigh.

1 Like