How to add a "select file" button that saves an image in a mongodb collection for a meteor project

Question

I've made a form for a project I'm working on and in it there's the tipical text inputs: "First Name", "Last Name", "Address" etc, etc... but there's a problem I'm facing and it's due to my lack of knowledge in Meteor and maybe HTML and Javascript too... I tried searching in other places but I didn't seem to find exactly what I'm looking for.

Anyways what I'm looking for is a way to make that when a user clicks on a button it pops up a window that lets the user select an image from his or her computer and then it will be saved in a mongodb collection. It also has to show inside this form in a small image.

I tried looking, and so far I've found that the HTML has the "input" tag with the "file" attribute that makes the pop-up window I want, my problem is what do I do from there? How do I link the event the user inputs and save the image into a mongodb collection?

I know this might sound really silly, I've seen many webpages and what not that have this kind of things... I'm really new at learning to code, and I really want to learn. So thank you for any help I can get.

Answer 1

There are 2 packkages on atmosphere you could use

https://atmospherejs.com/vsivsi/file-collection

https://atmospherejs.com/jalik/ufs

I have used the first of these successfully on several projects now, and recommend it. File uploading is fiddly in any environment, but they come with examples and documentation, so it's quite possible to be successful.

Answer 2

See if these solutions solve your problem:

https://atmospherejs.com/yogiben/autoform-file or http://collectionfs.github.io/Meteor-CollectionFS/