Download and display images

Question

I am trying to create an e-commerce site with an admin page where an administrator can upload images of certain products. I want Meteor to upload these images to a folder and then display these images on the product page of this product.

I know that usually the image files that will be used by the client should be inside the “public” folder, but I would like to know more about what other options I may have.

In addition, if I upload a new file to a “public” folder or if I delete a file in a “public” folder, the website will refresh ... and this is good and bad at the same time depending on what effect you are after. ...

Here are my questions:

• What if I create the "uploads" folder on the server and upload the images to this folder. Can I display images inside the uploads folder in the client’s browser? How??
• Is there a way to use a browser to access the contents of a "public" folder ???
• Is there a way to stop the site’s reactivity if changes occur in the uploads folder created?
• Does the image upload to the public folder the best solution available for this problem?

Thank you for help

Answer 1

When working with what can be a large number of images, I like to upload not only storage, but also third-party processing.

In this case, my go-to app will be cloud-based. That's why:

• Storage - I can store source images outside of my application. A huge advantage for synchronizing images from dev to prod.
• CDN - I get the added benefits of downloading images quickly from CloudN's CDN.
• No-load processing - all image processing is processed by Cloudinary, which does not slow down my application as a whole.
• Image manipulation - I can make calls to the original image, make calls just to get a sketch, and cause a change in the manipulation, that is: effect => shades of gray. Therefore, if a 1000x1000px image were loaded, I can request 50x50px from Cloudinary, which will return an image cropped to this exact size, instead of using CSS to compress a huge image.
• Flexibility - I can resize images and return this exact size to the application without having to reload the images. For example, if my product page was pulled out with thumbs at 40 pixels, I could easily make a call to capture the same image at a speed of 50 pixels.

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

Answer 2

You can do all this using the collectionFS meteor pack. The package is well documented, and you have many options that you can use to store downloaded files. CollectionFS also provides the ability to manipulate images on boot, for example, creating a reduced thumbnail size.

Answer 3

I realized that this question is a bit outdated. I had the same problem, one solution that works for me is meteor-upload https://github.com/tomitrescak/meteor-tomi-upload-jquery

Answer 4

Definitely not storing things in a public directory - this will slow down the launch of the application, and updating the hot code when loading an image can cause it to crash when there are a decent number of images.

Any of the above solutions with saving images elsewhere will work. Another option is to use the peerlibrary package: aws-sdk to download material to S3, which I use for several applications and found that it is very clean.

Answer 5

Saving an image as a base64 base in MongoDB is also a method. Useful for publishing in the API and eliminating the need to contact other third parties.