Upload and save images in Meteor

I’m working on a mobile app where users can add products and upload images.

I know that you can use GridFs to store images in mongodb, but I’m wondering if it’s possible to store the images in a folder in the server, and then store only the URL in mongodb.

In case it wasn’t possible to do it, is it possible to view images stored in GridFs outside the app?

Yes it’s definitely possible, but I wouldn’t recommend it. By storing uploaded images on a server’s file system, you could be causing yourself grief later on down the road if your app needs to scale. If you need to horizontally scale (add more servers) at any point, you don’t want to have to worry about trying to keep your file system based files in synch between servers (solutions exist but they’re a pain to manage). Your best bet is to either use something like GridFS, or some other 3rd party file storage solution (like Amazon S3, filepicker.io/Filestack, Uploadcare, etc.).

You could write a small separate app to do this pretty easily. If you’re using cfs:grdfs you would likely want to leverage the cfs:ui helper package to render stored images in some sort of table/list for easy browsing/filtering/etc. You might also be able to leverage one of the many off the shelf Mongo GUI’s out there; I’m sure some of them support rendering GridFS stored images.

1 Like

Filestack is really easy to set up but is limiting in that you can’t customize the upload modal in some ways. For example I wanted to add an extra input to it right under the uploaded pictures e.g. so users could add a caption to their photos but couldn’t.

I recommend Amazon S3. Set up a bucket: http://experimentsinmeteor.com/photo-blog-part-1/ (refer to ‘Setting up S3’)

Then instead of cfs, I prefer Slingshot: https://medium.com/front-end-developers/a-simple-user-avatar-meteor-react-s3-8aa4d9bee602#.iua8mrrt6 (you can see where downloadUrl is passed in and there you can store that URL in your MongoDB).

(but the first tutorial I linked also covers how to do this with cfs)

Simple and works great.

I am using Angular for my view layer and I have ng-file-upload (npm) for the client side and vsivsi:file-collection (atmosphere) for the server side which provides super simple retrieval. I like the combination a lot.