CODEWITHSUNDEEP
meteor
mohsinali1317
mohsinali1317

Reputation: 4425

Image Upload not working in Meteor

In my meteor app I am uploading images and storing them in dropbox. It works fine when I am running the app in localhost. But as soon as I run the app after deploying it to meteor.com the upload fails to work.

This is my code in server.js

var createThumb = function(fileObj, readStream, writeStream) {
// Transform the image into a 10x10px thumbnail
gm(readStream, fileObj.name()).resize('10', '10').stream().pipe(writeStream);
};

var dropboxStore = new FS.Store.Dropbox("files", {
key: "",
secret: "",
token: "", // Don’t share your access token with anyone.
transformWrite: createThumb, //optional
})

Images = new FS.Collection("files", {
   stores: [dropboxStore]
});

Images.allow({
'insert': function () {
    // add custom authentication code here
    return true;
 }
});

Here is the link to meteor.com http://image_upload.meteor.com/.

I have tried changing dropbox to s3 but it still doesn't work. Could it be because it is hosted at meteor.com?

Looking forward for a solution.

Upvotes: 0

Views: 328

Answers (1)

Brian Shamblen
Brian Shamblen

Reputation: 4703

Most likely it's because you're trying to use GraphicsMagick to resize the image in the transformWrite option, but meteor.com hosting servers do not have GraphicsMagick or ImageMagick installed.

https://github.com/CollectionFS/Meteor-CollectionFS/issues/299

You can use the meteor logs command to view the logs from your hosted meteor.com application to make sure that's the issue.

Edit

Here's some sample code for the jQuery cropper utility:

Template HTML:

<input type="file" style="visibility:hidden;width:1px" accept="image/gif, image/jpeg, image/png" class="profilePhotoFile">
<input type="button" id="btnEditPhoto" value="Edit Photo" class="btn btn-primary" style="width:160px"/>

<div class="modal fade" id="cropper-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div id="cropper">
          <img src="" alt="Picture">
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" id="btnSavePhoto">Save</button>
        <button class="btn btn-default" id="btnCancel">Cancel</button>
      </div>
    </div>
  </div>
</div>

Template JS:

Template.myTemplate.events({
    'click #btnEditPhoto': function(event, template) {
        $('.profilePhotoFile').click();
    },
    'change .profilePhotoFile': function(event, template) {
        if (!event.target.files || event.target.files.length === 0) {
            return;
        } else {
            var $inputImage = $(event.target);
            var URL = window.URL || window.webkitURL;
            var file = event.target.files[0];
            var blobURL = URL.createObjectURL(file);
            $image = $('#cropper > img');

            $('#cropper-modal').modal();

            $('#cropper-modal').on('shown.bs.modal', function() {
                $image.cropper({
                    aspectRatio: 1.0,
                    autoCropArea: 1.0
                }).cropper('replace', blobURL);

                $inputImage.val('');
            }).on('hidden.bs.modal', function() {
                $image.cropper('destroy');
                URL.revokeObjectURL(blobURL); // Revoke url
            });
        }
    },
    'click #btnSavePhoto': function(event, template) {
        $image = $('#cropper > img');

        //Change the width and height to your desired size
        var base64EncodedImage = $image.cropper('getCroppedCanvas', {width: 10, height: 10}).toDataURL('image/jpeg');

        $('#cropper-modal').modal('hide');

        var newImage = new FS.File(base64EncodedImage);

        Images.insert(newImage, function(err, fileObj) {
            if (err) {
                console.log(err);
            } else {
                //do something after insert
            }
        });
    },
    'click #btnCancel': function(event, template) {
        $('#cropper-modal').modal('hide');
    }
});

Upvotes: 1

Related Questions