What is the best way to manage files (images) on Meteor?

help
1

So I need to display some images on my app, we as admins have a back-end where we want to upload them (we use aldeed’s autoform and simpleschema for this), and then we want to display them on the front-end of a mobile app also made with Meteor.
So far I have found three alternatives that we can use to make this work, I would like to know if anybody could tell us the best way to do this, and why you think it is the best way (for simplicity, performance, speed, etc…), the ways I have found are this:

  1. cfs:gridfs
    Easy to implement with autoform, and the files are saved on our database.

  2. cfs:s3
    Easy to implement with autoform and the files are saved on Amazon S3

  3. edgee:slingshot
    A little harder to implement, but the files get sent directly to Amazon S3

So if you could please let me know which solution would be the best and why! Thanks so much in advance, I can’t wait to show you guys what I’ve been working on.

2 Likes
2

I know that this is not in your listing, but for my apps I manage images with cloudinary (a cloud service which store your images and provides url or other ways to find them ) and the lepozepo:cloudinary package.
It works well, so maybe you already know it and it is of no use for you, but just in case :



I used it because it was the simplest way I found at the time.

3 Likes
3

I could definitely check it out, thanks for the advice @voyag3r !

4

@voyag3r how do you retrieve the image though? I was able to upload image to cloudinary using Lepozepo:cloudinary package but how do I retrieve that ?

<img src="{{c.url public_id format=format}}">

this isn’t working for me. I am getting the URL in the console though. So the idea would be to store that url and use it to ask the image form cloudinary . But I just need some code samples.

5

From my experience Slingshot gives the most quick and easy implementation. It’s not the package with the most options but it works just fine. If you need more structure and options gridfs is a strong package.

2 Likes
6

You can also look at a package I published if you are using autoform
https://atmospherejs.com/cosio55/autoform-cloudinary

2 Likes
8

@cosio55 cudos mate.

It is by far the easiest and quickest way of uploading to images, specially with autoform. :smiley: :smiley: . any code samples for showing the uploaded images?

9

@cosio55 Mate, your package is a godsend. Being a beginner, I was stuck at uploading images and then showing them for my users for days. Tried almost each method out there, none worked. asked everywhere, none of the answer worked. Finally , a dead simple package from you worked like magic!!! Just take a look at the problems I faced while using these packages:

1. cfs:ui

{{#with FS.GetFile "images" selectedImageId}} // image url {{/with}}

problem:

with this was I couldn’t get the ‘selectedImageId’ .

2. cfs:gridfs

problem :

grid fs stores image in a separate collection. My user list uses iron router to show the user list form another collection. Image was getting uploaded into the images collection. But For the love of my life, I couldn’t show them correctly. Each user was seeing his own picture rather than the profile owner’s picture. happened because of a wrong mongo query but I couldn’t get the right query. Tried attaching the photo in the profile.profilePicture, but same problem of wrong image stayed.

And I had to put the upload photo in a separate page and NOT in the autoform.

  1. lepozepo:cloudinary

Problem:
Image uploaded fine. But had problem getting /storing the image url. Couldn’t get

<img src="{{c.url public_id format=format}}">

And I had to put the upload photo in a separate page and NOT in the autoform.

public_id ??? Got lost there.

4. autoform-file by yogiben

same problem as GridFs.

Finally your package took me just a minute to figure things out. A minute vs days of other big name packages!!!

:smiley:

<div> <img src=" {{image}}" alt=""> Image </div>

just add {{image} in the img source and thats it. The image url is stored in the same collection autoform stores everything.

Cheers Mate.

1 Like
11

Yes, you just have to use the same name you used on autoform:

ie:

imagen: {
    type: String,
    label: "Imagen",
    autoform: {
      afFieldInput: {
        type: 'cloudinary'
      }
    }
  },

and then to display it just use {{imagen}} or whatever name you gave to it on the schema. :wink:

1 Like
12

Actually those are some great packages and they have a LOT of good features, I just wanted to make mine easier to use with fewer features and an easy way to implement.

1 Like
13

Have no clue how you manage to make it work,I wouild love to have your settings.

14

@cosio55 I really love how easy it was to integrate your package into my app. I have a question though about something I ran into. I added a userId to the schema of my images collection. This was so that I could use it to allow the user to have that image displayed on their profile page as the profile picture. In the template I added {{avatar}}, which is what the field is called. I am able to upload but the image will not display in the template. Am I missing something?

15

have you solved your problem mate ?

16

Hello :slight_smile: , I have the same problem. Have you figured it out?

17

Hello, I have a pb using your package cosio55:autoform-cloudinary
I get an error that i don’t have a clue how to solve : Exception while invoking method ‘afCloudinarySign’ ReferenceError: Match is not defined

Any idea?

18

Hi, not sure I wish to install your package because I wish to use my forms in Vue.js. Could you give us the code that is retreiving the image? Thanks.Marc

19

it means you have to set up the cloudinary config in the settings.json file

20

to retrieve the image is just use {{ name-of-your-key-in-autoform}} . So if you are using this code in your schema ,

Then simply use {{imagen}} where you want to show the image and be done with it. Don’t forget to get the data for the Collection though !

21

I do not know cfs:s3.

  1. Could anybody compare cfs:s3 with slingshot?

I would maybe auto generate several lower resolution and thumbnails on S3 with this method: http://jice.lavocat.name/blog/2015/image-conversion-using-amazon-lambda-and-s3-in-node.js/

OK I can use long difficult to guess ID.
2) I wish to use S3 with abucket that is limited somehow for private access (because hi resolution originals). So, not a problem displaying “no so much secret” public low resolutions,
But about downloading high resolution images,

Does anybody know how to privately retrieve files from S3? Let’s say for downloading, not necessarily displaying in the browser (so, here, a bit out of topic, but maybe that could be answered by those in this thread).

Thanks,
Marc

22

Hi guys,

does anyone here have a working solution to embed an image-upload into an autoform (user-collection) and update/insert via a Meteor-METHOD and NOT via allow/deny? I have tried https://github.com/yogiben/meteor-autoform-file, but run into problems when trying to switch into methods.

Does anyone have a quick recipe?