Need example for upload camera image

help
1

Hi guys,
I’m new to Meteor and Javascript in general.
I want to create an demo app that it could take a picture and the upload to my local server.
Following examples, I can take a picture from camera (using web browser, not iOS device yet) and store it to Session, display it to the view. But my problem that I did know the good way to handle data from camera and send it to my local server (store it as image and to mongoDB???).

Could anyone already do this give me some advices or an example to look at?

Thank you very much!
MNChau.

2

Here are some options: http://stackoverflow.com/a/27934142

However, I would suggest using a community package: they all have examples on uploading and retrieving images in their readmes.

3

Hi @Dirk,
Thanks for your response, It’s really helpful. I look into it and look like file-collection very promising.
I could use it to store user avatar into DB.
Maybe using meteor-uploads for store others media types of user upload.
Yes, I want to mimic and create a social network, something like facebook. Of course, just for learning.

MeteorCamera.getPicture({}, function (error, data) {
    Session.set('photo', data);
});

Could you help me figure out how to save that data (above) by using file-collection??? I don’t want save it to a temp file and upload that file then.

Thanks.

4

Well if you want a really quick approach, you could just insert the base64-encoded data URI that you get into your Collection as a string. For (smaller) user avatars this should work for demo purposes. To use the file-collection package, I think you have to work through the documentation. It is a bit more complex because it is using resumable upload support. There is an example in the documentation: https://github.com/vsivsi/meteor-file-collection/#example

5

Hi Drik,
I just know how to save image from camera into my mongoDB.
I known that it not be suited for very large image (video), so I’ll try to save it to file on my local server.
Thanks.

6

Hi all,
Saving the captured image into mongoDB is so easy that I can’t believe it. I took me almost 3 days just to read a lot of converting, encoding, sending data via network to server, bla bla bla, …

So, I just want to put this here for anyone else (noop like me) would find it helpful.

Just by using mdg:camera package is enough.

This is html template file:


    

    {{#each photos}}
        

    {{/each}}

And this is the js helper file for that template:

Pictures = new Mongo.Collection('pictures');

Template.takePhoto.helpers({
    'photos': function () {
        return Pictures.find();
    }
});

Template.takePhoto.events({
    'click .capture': function () {
        var cameraoptions = {
            width: 640,
            height: 480
        };

        MeteorCamera.getPicture(cameraoptions, function (error, data) {
            //Session.set('photo', data);
            Meteor.call('saveImage', (data));
        });
    }
});

And from server side:

Pictures = new Mongo.Collection('pictures');

Meteor.methods({
    saveImage(data) {
        console.log("[Server] - Save picture???");
        Pictures.insert({image: data});
    }
});

And that’s it. So simple, so easy. We don’t even need any third-party packages, everything works out of the box.

This is some drawback:

  1. Save to DB would be a trouble later. (This simple for learning how to take picture and save to DB)
  2. Still using autopublish and insecure, but I think they’re not to be a problem.
  3. I think I could swap the code from server side, just to save the image to file on local server (not try it yet). Then I can complete finish this thread goals: save taken picture to file and to DB.

Cheers!!!

7

Hi @mnchau has worked on android, I’ve tried with the example that you left and faith work locally, but when it created the apk and work with the server that nothing works on android photo never appears.