Meteor app: Difference Between Uploading Images from Iphone than Computer?

Question

I have a meteor app that's live and running, and I tested uploading images on a desktop and they work fine. But When I try on my iphone's safari it crashes and reloads the page.

Is there a difference between the setup if you are uploading images from mobile? I am using Collection FS. Please note, this is not an IOS app, but rather uploading from the mobile browser.

Here's the relevant code

    HTML

<div class="fileUpload btn btn-success btn-lg  pull-right visible-xs visible-sm">
  <span class=""><i class="fa fa-camera"></i></span>
  <input type="file" class="myFileInput" accept="image/*" />
</div>


CLIENT SIDE 

 'change .myFileInput': function(event, template) {
    var user = Meteor.user();
    var files = event.target.files;
    var fsFile = new FS.File(files[0]);
    fsFile.username = user.username;

    var newImage = Images.insert(fsFile, function(err, response, fileObj) {
      if (err) {
        console.log(err)
      } else {
        console.log('success');
      }
    });

  }




  SERVER SIDE 

  var profileThumbsStore = new FS.Store.S3('thumb', {
    accessKeyId: Meteor.settings.key,
    secretAccessKey: Meteor.settings.secret,
    bucket: Meteor.settings.bucket,
    folder: 'thumb',
    transformWrite: function(fileObj, readStream, writeStream) {
      gm(readStream, fileObj.name()).resize("100", "100").stream().pipe(writeStream);
    }
  });


  var profileStore = new FS.Store.S3('original', {
    accessKeyId: Meteor.settings.key,
    secretAccessKey: Meteor.settings.secret,
    bucket: Meteor.settings.bucket,
    folder: 'original',
    transformWrite: function(fileObj, readStream, writeStream) {
      gm(readStream, fileObj.name()).resize("500", "500").stream().pipe(writeStream);
    }
  });

  Images = new FS.Collection('images', {
    stores: [profileStore, profileThumbsStore],
    filter: {
    // maxSize: 1048576, // in bytes
    allow: {
      contentTypes: ['image/*'],
    },
    onInvalid: function (message) {
      if (Meteor.isClient) {
        sAlert.error(message);
      } else {
        sAlert.success(message);
      }
    }
  }
  });

Like I mentioned, it's working properly on desktop, so I don't understand why it wouldn't work for an iphone.

Any help would be appreciated.

Michel Floyd · Answer 1 · 2015-08-12T20:34:34.173

1

Try using FS.Utility - I'm using this across mobile and browser and it works like a champ!

'change .myFileInput': function(event, template) {
  var user = Meteor.user();
  FS.Utility.eachFile(ev, function(file){
    file.username = user.username;
    var newImage = Images.insert(file, function(err, response, fileObj) {
      if (err) {
        console.log(err)
      } else {
        console.log('success');
      }
    });
  }
}

edited Aug 12 '15 at 20:34

answered Aug 12 '15 at 20:07

Michel Floyd

18,793
4
24
39

Thanks I tried your solution, but I found what the real issue is: Exception in queued task: Error: cfs:graphicsmagick could not find "graphicsMagick" or "imageMagick". Are you using ubuntu by any change? I thought I had installed graphicsmagick on the server but apparently I didn't . Been trying all sorts of thing http://stackoverflow.com/questions/9992336/installing-rmagick-2-13-1-with-graphicsmagick-on-ubuntu-10-04 and nothing seems to work – socialight Aug 12 '15 at 22:05
I haven't finished integration with GraphicsMagick yet so I'm a step behind you. – Michel Floyd Aug 12 '15 at 23:00
Out of curiosity, why would it work from desktop at all? – Michel Floyd Aug 13 '15 at 05:27
Because I had graphicsMagick installed on my local server, but hadn't installed on the remote server. Once I did that it works fine. – socialight Aug 14 '15 at 16:24

Meteor app: Difference Between Uploading Images from Iphone than Computer?

1 Answers1