Crop image (Avatar), upload to S3


#1

Hi

It is my first time with Images manipulation. So i don’t have any idea about why the people uses S3 to store the images.

So. After i readed about S3 in google. I’'ll make the script to crop the image and upload to the s3 server. I plan to use this plugin for jquery: https://fengyuanchen.github.io/cropper/ (I’m using Meteor + React).

Can you explain me how i upload files in meteor? I need to upload the file in meteor server (Galaxy) to crop the image and then to S3? How i can made that work?

Thanks


#2

I saw this React cropper the other day https://github.com/mosch/react-avatar-editor. I haven’t used it but it may be one to reference. Also the meteor chef article on S3 is informative https://themeteorchef.com/recipes/uploading-files-to-amazon-s3/


#3

If you choose S3, AWS Lambda can be a good choice to crop image.


#4

Thanks. I’ll read your article :slight_smile:

Why the people uses the S3 server for images? I can upload a client copy to crop before the image upload?


#5

You can choose other server to storage your images. AWS is just one choice.

This is a good answer

And AWS Lambda is very cheap and fast.


#6

But. WHY i need to use a S3 or external server instead Galaxy? (For example. The same webhost of the back end with a ‘images’ folder. In Meteor ‘public\images’)

Do you have a tutorial for Lambda for crop images. Why i can made that in Galaxy?

I dont understand the images big problem thing.


#7

Galaxy can be your Meteor app server, S3 can be used only for image storage. They do not conflict.

It is your choice to choose which service as image storage.

But S3 is quite cheap.


#8

They have a good tutorial which is creating thumbnail

http://docs.aws.amazon.com/lambda/latest/dg/with-s3-example.html


#9

I understand there are some issues with storing images in MongoDB.

CollectionFS used to be a popular package allowing the storage of image files in MongoDB, but I think recently it was announced that CollectionFS would no longer be maintained (I think there is a thread on here).

That being so using a package like edgee:slingshot (which is what the meteorchef article linked above uses) allows you upload images directly from the client to S3. That means your server on Galaxy does not need to handle the image at all. You simply store the link to your image in your MongoDB database.

edgee:slingshot : https://github.com/CulturalMe/meteor-slingshot


#10

Actually there is only one “killing” reason to use S3 - its Cost.

Many devs host Meteor apps using AWS or Digital Ocean and data transfer costs are not quite optimal for storing a huge amount of files server-side. If you host Meteor app your own, or use some kind of low-cost service(or don’t care of overpay), you may ignore S3 and any identical services entirely.


#11

But the cost of Galaxy Meteor is for hours of use: https://www.meteor.com/pricing

So. if i pay $0,04 per hour. ¿Why i need to use a AWS for image store? Galaxy don’t charge me for disk space.


#12

Short answer - you don’t need S3 if you are not charged for bandwith/storage.


#13

Because it’s not a “server” as you know it. You get one or more instances (servers) running at the same time. They are being recycled so they will be turned off and on constantly.

So as you can imagine: If you store your images locally they will be removed (because the server disappeared) a few minutes/hours/days later.

You can only store temporary files (for processing needs) on Galaxy.

Also it’s a good practice because: If you have 2 Galaxy instances and the client requests a file: How do you know on which server it is? S3 all handles that for your.


#14

Okey. I understand.

First question:

  1. How i upload a file to the client (and only client. No s3 or galaxy) for crop a image?

#15

In general a client downloads an image. Where is the original stored?


#16

In the computer… I want this

Local computer (or cell phone) -> App Crop the image locally -> Upload to S3

How i can made the first step? With this? https://blueimp.github.io/jQuery-File-Upload/index.html


#17

There are many solutions, this is all client stuff, see for example:

http://scottcheng.github.io/cropit/

Search google something like: javascript file input crop


#18

Awesome plugin!!! Thank you.

I’ll try this first step. Then i’ll try to upload to s3


#19

Another question: I need to upload ALL the images in my website to S3? (Logos, defaut avatar, etc.)


#20

No, that’s part of your application.

Only do that for data. Same as you would not write data into text files for content on your server, you store it in mongo. But for example a translations file (part of your app) would be stored on your server as part of the app.

So only content should be stored somewhere else.