Pure Javascript app + Amazon S3? - javascript

I'm looking to confirm or refute the following:
For what I have read so far it is not possible to write a web application with only javascript -- no server side logic -- served from Amazon S3 that also store data only to S3 if you need to have multiple clients with private data per client.
The issue I see is the Authorization header required for every Ajax call that would force me to put the signature (and my AWS id) right there in the page source for everybody to see.
Is that correct or I misunderstood the docs?
Are there workarounds?

In short, you are correct.
If your AWS key ends-up in any way on the client-side, you are in trouble.
A possible solution is, of course, to have the user specify their AWS key for storing their data.

I'm working on a project that will do something similar to this, mine will have the users use their own S3 which I will store in HTML5 localStorage. It's a bit tricky, but I've got the basics working.
It involves making an Javascript program that replicates itself into S3, gets itself from S3 and then transfers credentials and control into the S3 loaded version.
I'm using the excellent SJCL to do signature generation and jQuery's ajax functionality for the parts I can.
My work simply initializes the S3 side application and does a test PUT/GET sequence to S3. I also rewrote a JQuery postMessage plugin (which StackOverflow won't let me post for lack of rep) for communicating between my frames.
In my case, I'm trying to fit the entire application into a single HTML file so that I don't have to do as much initial transfer into S3, but perhaps there are other ways to work this out.

iBeans offers a way around this without having to write any server side code. There's an S3 iBean (a developer is working on it to be released in the next few days - watch the mulesoft blog for an announcement) and you can access it right from your javascript. The iBean itself runs on a server so you wouldn't need to store your keys in the javascript.

Related

What is the best way to read/write data with javascript?

I want a way to really simply read/write to a json file (as my storage) online. I want to be able to host an app and make axios requests to this to read the data, update it locally and then push the data to the online resource. is there any simple way to do this?
I've used firebase in the passed but this is too long for me to set up now. also http://myjson.com/ only seems to let me do reads. there must be a quick way to host data in a json format that allows reads and writes
I also don't want to use localstorage because other people will be accessing the app
I think it's unfortunate your question is getting down-voted - but that's because the premise of your question is off. Reading/writing a single JSON file is expensive (e.g. timewise) and would be a naive approach (that's okay, we've all been there). What you want is a database. I would suggest starting off with a simple database such as mlab. But even before that, I would suggest you read this article - it gives a good overview of what a CRUD app is.
But if you really want to use a JSON file (again, I would highly NOT recommend this). Then:
You'll need to setup a server
Expose an API endpoint (where you handle GET/POST etc requests) for that server, so clients/people can communicate with said server
Have the server talk to some kind of store (e.g. https://aws.amazon.com/s3/) where the file would live
steps 1. and 2. you'll eventually need to do for any server. But step 3. is why I would NOT recommend using a JSON file. That's because it's very expensive (as noted before) to get the file, change the file, and then put that file back in the store. At that point, you might as well use a database.
Good luck! :)

How to download Image from browser & upload to Amazon S3

How can I allow the client to upload an image in the browser, and then I upload it to Amazon S3? I have been looking around a lot and have found no resources explaining how to do this.
Are there any tutorials that I could follow?
Are there any libraries that I should use for this?
I am using AngularJS on the frontend and Node.js on the backend.
In short, look for two different tutorials. One for uploading from a client to a server, one for uploading from a server to S3.
StackOverflow discourages linking to specific tutorials, but there are lots of them out there, so it shouldn't be too tricky to track down.
For the client-to-server, you'll want to do a basic HTML form upload up to the server, then snag the data. You can temporarily write it to your file system (if you're on Linux, the /tmp directory is a good place to stash it).
After that, just upload from your server to S3. Amazon itself has some good documentation on that. The s3 package for Node also has good examples: https://www.npmjs.com/package/s3
It's also possible to go straight from the browser to S3, which may be better depending on your use case. Check this out: http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html
You're going to need the AWS SDK for node. Then they have a pretty comprehensive developper guide. You may have to read up on credential management, too.
the procedure would be as follows
user uploads the image from browser to your server (I'd recomend plain form upload, unless you feel ok with uploading via ajax)
then your server uses the SDK to save to S3
you display back info to the user (link to the image, upload status ?).
you could also use pre-signed posts but that seems more advanced and I haven't seen info on it for Node.

Uploading large image files and video to Google Cloud Storage

I am using the standard python app engine environment and currently looking at how one goes about uploading multiple large media files to Google Cloud Storage (Public Readable) using App Engine or the Client directly (preferred).
I currently send a bunch of smaller images (max 20 - between 30 and 100k on average), at the same time directly via a POST to the server. These images are provided by the client and put in my projects default bucket. I handle the requests images using a separate thread and write them one at a time to the cloud and then associate them with an ndb object. This is all fine and dandy when the images are small and do not cause the request to run out of memory or invoke a DeadlineExceededError.
But what is the best approach for large image files of 20mb+ a piece or video files of up to 1GB in size? Are there efficient ways to do this from the client directly, would this be possible via the Json api ,a resumable upload, for example? If so, are there any clear examples of how to do this purely in javascript on the client? I have looked at the docs but it's not intuitively obvious at least to me.
I have been looking at the possibilities for a day or two but nothing hits you with a clear linear description or approach. I notice in the Google Docs there is a way using PHP to upload via a POST direct from the client...https://cloud.google.com/appengine/docs/php/googlestorage/user_upload...Is this just relevant to using PHP on app engine or is there an equivalent to createUploadUrl for python or javascript?
Anyway, I'll keep exploring but any pointers would be greatly appreciated.
Cheers
Try BlobStore with Cloud Storage or the Image Service

Download files from authenticated API with javascript

I have found several threads where the same question has been asked, but I suspect that the top answer in most of them are outdated.
My problem
I have a frontend javascript app communicating with an oauth authenticated API. This API contains files I want my users to be able to download. Because the API requires authentication, I can not show the user a regular link in order to initiate the download.
Instead, I have to send a XHR-request to initiate the download (so I can add the necessary authentication header).
In my case, the files will usually be pretty large (>1GB), so keeping them in memory is not a solution.
Reading this article, I'm wondering if it might be possible to stream the file from the API to the filesystem through the Javascript file API. Does anyone have a suggestion on how I might make this work?
Isn't this a pretty common problem in 2016?
It is somewhat hack-ish, but I've used it before and it works wonders.
From Downloading file from ajax result using blob

Integrate Node.js with Symfony2 or PHP

I'm developing a web application with Symfony2. I need to create a push notifications sysmte (like Facebook). When an user publish something, I need some of another users receive a notification.
I saw that Node.js it's the easiest manner to do this. But, I did some simple examples and all works fine, but I don't know how can I integrate this node.js application with my Symfony2 application, or really with a PHP application.
Anybody can help me?
Thanks in advance!
Please note that you've not given enough details, so I will respond as a front-end developer and not as a mobile developer
Integrating NodeJS and PHP (in general) is not a good way since you need to launch both servers separatly, create the websocket server in JS while your application is in PHP and finally create a request (GET or POST) from your PHP to you JS server. Well, a big mess, so I'll expose my solution here under.
Quick insight for mobile apps. Well, technically, there's no easy way. You can use the Push "protocol" (http://www.wikiwand.com/en/Push_technology) with NotificationPusher (https://github.com/Ph3nol/NotificationPusher). I didn't used it before so I can't help you with it.
In general.
Most of the time when people thinks of Push, long polling will do the trick. For starters it means that the request is made client-side and the server don't send data & close connection until there's new data.
How do you implement this ?!?
Basically, you change the max_execution_time using ini_set or set_time_limit to a very long time for the current script and launch a loop (like a do..while) with a sleep and the check to your data inside. From your Javascript just make an Ajax call, for example with jquery: $.get. Just remember to remove the timeout and stay in asynchronous mode.
The only drawback of this solution is that you will always have a connection opened to your server which will consume a bit more of battery on a mobile device. If you have multiple types of data to receive do not hesitate to merge the calls and publish a type in your response data, since most of the browsers allows only 2 or 3 simultaneous connections to the same server.
I sounds like your describing WebSockets.
Take a look at Socket.io, its a module for node.js.
Also there is a example at GitHub https://github.com/Automattic/socket.io/tree/master/examples/chat
Interesting files for you should be the index.js and the public/main.js.
You can see the example live at http://socket.io/demos/chat/

Categories

Resources