My hosting has very limited memory space, and I want part of my images(or all of them) be saved at amazon S3 service.
For example, User uploads a picture at site. I take original image, create 5 different thumbnails with it, send original image to S3 with putObject function, and delete it locally. Then user wants to edit his picture, lets say rotate it. I will download original image, rotate it, re-generate 5 thumbnails from it, and put again to S3?
What if i want one of my generated images thumbnails be at Amazon S3, this image is rarely viewed(lets say it is a big portrait, and served only on click at user profile). Do i download image to machine, send it to page, and delete it? Will this approach be fast? Is there better logic for this part?
Struggle for advices.
There is no reason you can't store all your images on S3 - the original and all of the generated thumbnails.
The host receives the uploaded images, generates the required thumbnails and the PUTs them all to S3. Your web application then references all of your images directly from the S3 location - there is no need to download them to your host in order to show them on your website.
Serving your images (and in fact all of your static content - i.e. css files and js files) from S3 will in all likelihood speed up the the page load of your website and if you need a further performance boost, with just a few clicks of the mouse you can use AWS Cloudfront to push your s3 files to geographically dispersed edge locations around the globe to get those items 'closer' to your intended users.
Related
I have AWS S3 buckets full of images and was wondering how I could browse them without needing to download the whole batch first. Is there a way that I can pipe them into feh through awscli or some other method?
Amazon S3 can act as a web server for your images. However, it simply serves the image files when they are requested. You will need to write an application or web page that incorporates those images into a form suitable for viewing.
For example, you could list the files in the Amazon S3 bucket and then convert them into an HTML page with lots of <img src=... /> tags. The web browser would then download the images from S3 and insert them into the web page in your browser.
If you are looking for a full-featured photo management app, try services like Prime Photos from Amazon or SmugMug. They've done all the hard work for you.
I'm building a Ghost application and it will be hosted on Heroku that can not store image uploads so what I did is to search around on Google and I found a way to upload images directly to Amazon buckets.
After a 4 hours fight I've been able to upload and read images from the S3 to the Ghost blog but what I wish also to achieve is to delete an image I'm not using anymore.
Let's say I upload an image, I don't like it and I replace it with another. The S3 keep both images.
There is a way to delete both images from Ghost and S3?
I'm using ghost-s3-storage. Thanks
I'm using Ember on the frontend and Node/Express on the back end. I've got image uploading directly from my client to S3. My issue now is that the image sizes are huge (970 × 728 pixels (Natural: 3264 × 2448 pixels)) and I want to optimize the size. I've been able to do that using the canvas. But the resulting dataURI is also, very, very large. I could store it on my server, but that seems silly since then I'll have 1 large file sitting in s3 and another sitting in my server for every single image. I feel like the solution should be to upload the dataURI (in blob form) directly to s3 in the first place, but that's where I'm stumped. In order to draw the image in the canvas, I need the src url from s3. So how can I get the dataURI and save it to s3 without already having the original in s3 in the first place? Or should I be saving both versions in s3? Any advice on how to achieve this would be great. Thanks!
Browser support for this type of thing is limited. You could upload the large image to your server, use your server to resize the image, then upload the resized image from your server to s3 (making sure to delete the working copy). This is also good for hiding your AWS creds.
Another option is to use a service like: http://filepicker.io
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:
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??
Is there a way to use the browser to access the contents of the 'public' folder???
Is there a way to stop the 'reactivity' of the site if changes happen in the 'uploads' folder created?
Is uploading the images to the 'public' folder the best solution available to this problem?
Thank you very much for the help
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/
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.
I realized this question is a bit old.
I had the same problem, one of the solution that works for me is using meteor-upload https://github.com/tomitrescak/meteor-tomi-upload-jquery
Definitely don't store stuff in the public directory - it will slow down starting up the app, and hot code refreshes on image upload could easily cause it to crash once there are a decent number of images in there.
Any of the above solutions with storing images elsewhere would work. One other option is using the peerlibrary:aws-sdk package to upload stuff to S3, which is what I use for several apps and have found to be very clean.
Storing the image as a base64 string in MongoDB is also a method. Useful for posting to APIs and save the worry of having to handle other 3rd Parties.
The first bit before the _ is the id of the pin...what are the ZZtfjmGQ used for? I'm assuming the _c is probalby something to do with size.
http://media-cache-lt0.pinterest.com/upload/33284484717557666_HZtfjmFQ_c.jpg
I'm building an image upload service in node.js and was curious what other sites do to store the image.
Final images are served from a CDN, evident by the subdomain in the URL. The first bit, as you pointed out, is the id of the image, the second bit is a UID to get around cache limitations for image versions, and the last bit is image size.
A limitation of CDNs is the inability to process the image after upload. To get around this, my service uploads the files to my Nodejs server where I then serve the image back to the client. I use a jQuery script the user can use to crop the image which sends crop coordinates back to the server and I use ImageMagick to create the various sizes of the the uploaded image. You can obviously eliminate the crop step and just use aspect ratio's to automatically create the needed image sizes. I then upload the final images to the CDN for hosting to end users.
When a user needs to update a photo already in the CDN, the user uploads to nodejs server, images are processed and sized, the UID hash is updated and then uploaded to the CDN. If you want to keep things clean (and cut on CDN cost) you can delete the old "version" at this step as well. However, in my service I give the option to backtrack to an older version if needed.
The rest of the CRUD actions are pretty self explanatory. You can read a list of images available from the CDN using the ID (My service has a user id as well as an image id to allow more robust query operations) and deleting is as simple as identifying the image you want to delete.