Getting images from Amazon S3 in AngularJS - ruby-on-rails

I'm developing a website with AngularJS in frontend that sends requests to a Rails 4 API backend. I have to manage quite images, so I would like to use Amazon S3 (but I'm a newbie with this and I'm a bit lost).
I have uploaded an image to the folder in a new bucket (yanpy.dev) I have created in the path:
img/boats/1/1.jpg
How can I get this image to display it in a view in my AngularJS front-end?
Im trying something like:
<img src="http://yanpy.dev.s3.amazonaws.com/img/boats/1/1.jpg">
But it is not working.

See #Sebastian comment above. Point for him.

Related

Uploading image with vuejs frontend

I'd like to implement uploading a profile picture for users. I'm using a VueJs frontend with a Rails API. What I'm trying to do is upload the image only using the frontend. I'd like for the file to get uploaded without any calls API calls. I could then store the location of the file in the picture attribute in the backend and retrieve it. Is that possible? I'm also using Element library.
<el-upload :http-request="addAttachment">
<el-button size="small" type="primary">Click Upload</el-button>
</el-upload>```
What you are looking at is called,
direct uploads or browser based uploads.
There should be support from storage service you are using.
Example: using S3 and GCS it is possible.
Upload without any API calls? -
Not sure, I once had to make a small API call to get the signature key and use it with POST params to upload file to storage service(GCS)
Once the API response is returned, you then might want to write to db about the file path.

TinyMCE 5 images not showing to some users

I am using TinyMCE 5 on my ruby on rails app that runs on https. I have a Wordpress website running on http that hosts images.
After uploading an image to Wordpress, I copy its HTTP URL into tinyMCE image section and these work fine and displayed properly as well.
However, some users are complaining that they can't see images. Whenever I check it works fine. What could be the problem?
Possible reasons could be too many calls at the same time, usage of http for Wordpress site or slow network connection of the user.
This is most likely an issue with the host that you are using for storing images. (maybe there is a daily limit on number of requests that you can process)
Possible solution:
Store your images on AWS S3 or Google Drive etc and use their links in tinyMce. It will most definitely work.

Rails and Heroku - how to display XML file on URL "example.com/file"?

A client has a website running on Heroku and files are stored on Amazon S3.
The sitemap map is set up on URL: website.com/sitemap.xml -> after entering this URL address into browser is made redirect to http://s3.amazonaws.com/bucket/sitemap.xml. The XML has like 30MB.
But now the client wants to display the XML file straight on website.com/sitemap.xml, no redirect to Amazon S3.
If I asked his why, he wrote me "because it requires Google Webmasters".
I would like to ask you, if there is any way to display the content of sitemap.xml straight on website.com/sitemap.xml... or, if there is any way to solve this.
Thank you, have a nice day!
So for now i don't see any option but download sitemap.xml from s3 and then render it in your application.
use net/http do download the page.

Amazon S3 Multipart Upload with plupload and Rails 3

Amazon has multipart upload functionality where you can send a file in chunks and get it assembled on S3. This allows for some nice resume like functionality for uploading to S3. From another question i got this nice link: Rails 3 & Plupload
My question is does anyone have any examples where they used the plupload chunking feature with the Amazon multipart feature? Ideally with carrierwave & fog.
I can see it doing the following:
Generate Unique ID for the upload with plupload,
can we do an event when the plupload
starts?
Attaching an ajax request to
the chunk completed with the ID
Having ajax controller method on the
server which uploads to s3 using the
ID
when all are complete fire a
controller action to reassemble
There is supposedly some PHP code which does some combining, but not with S3 and i can't stand to read PHP.
this is very similar, you should find Interesting
enjoy & feel free to fork/pull request ... & so on
You can find simple core java code without AWS library, This will help u implement in any technology..
http://dextercoder.blogspot.in/2012/02/multipart-upload-to-amazon-s3-in-three.html

can Amazon be used to offload server of static files for a Ruby on Rails app, but still support the app's authentication & authorization?

Can one of the Amazon services (their S3 data service, or otherwise) be used to offload server of static files for a Ruby on Rails app, but still support the app's authentication & authorization?
That is such that when the user browser downloaded the initial HTML for one page of the Ruby on Rails application, when it went back for static content (e.g. an image or CSS file), that this request would be:
(a) routed directly to the Amazon service (no RoR cycles used to serve it, or bandwidth), BUT
(b) the browser request for this item (e.g. an image) would still have to go through an authentication/authorization layer based on the user model in the Ruby on Rails application - in other words to ensure not just anyone could get the image...
thanks
The answer is a yes with a but. You can use a feature of S3 that allows you to create links to secure S3 objects that has a small time to live, default is 5 minutes. This will work for any S3 object that is uploaded as private. This means that the browser will only have X seconds or whatever to request the file from S3. Example code from docs for the AWS gem:
S3Object.url_for('beluga_baby.jpg', 'marcel_molina')
You can also specify an expires_in or expires option per file. The bad thing is that you would need to create a helper for your stylesheet, image, and js links to create the proper S3 URLs.
I would recommend that you setup a domain name for your S3 bucket, like "examples3.amazonaws.com" and put all your standard image files and CSS there as public. Then set that as the asset host in your rails config. Then, only use the secure links for static files that really need it.

Resources