Meteor JS image upload and display

Question

I'm trying to build a E-commerce site with a admin page where the administrator can upload images of certain products. I'd like Meteor to upload those images to a folder and then display those images in the product page of that product.

I know that normally the image files that the client will be using should be inside the 'public' folder, but I'd like to know more about what other options I might have.

Also, if I upload a new file to the 'public' folder or if I delete a file in the 'public' folder, the website refreshes itself...and this is good and bad at the same time depending on what effect you are after....

Here are my questions:

1. What if I create a 'uploads' folder in the server and upload the images to that folder. Would it be possible to display the images inside the 'uploads' folder in the client browser??? How??
2. Is there a way to use the browser to access the contents of the 'public' folder???
3. Is there a way to stop the 'reactivity' of the site if changes happen in the 'uploads' folder created?
4. Is uploading the images to the 'public' folder the best solution available to this problem?

Thank you very much for the help

Answer 1

When dealing with what will likely be a large number of images I like to offload not only the storage but also the processing to a third party.

My go-to app in this situation would be Cloudinary. Here's why:

• Storage - I can store the original images outside of my application. A huge benefit to keep images in sync from dev to prod.
• CDN - I get the extra benefits of images being quickly loaded from the Cloudinary CDN.
• Off-load Processing - All of the processing of images is handled by Cloudinary which doesn't slow down my app as a whole.
• Image Manipulation - I can make calls to the original image, calls to just get a thumbnail, and calls to change manipulate, ie :effect => grayscale. So if a 1000x1000px image was uploaded, I can request a 50x50px from Cloudinary that will return the image cropped to that exact size rather than using CSS to shrink a huge image.
• Flexibility - I can change the size of images and return that exact size to the app without having to re-upload images. For example, if my product page pulled in thumbs at 40px, I could easily make a call to grab the same image at 50px.

Hope this helps. http://cloudinary.com/

Answer 2

You can do all of this using the meteor package collectionFS. The package is well documented and you have a variety of options that you can uses for storing the uploaded files. CollectionFS also gives the ability for image manipulation on the upload, such as creating a resized thumbnail.