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.
Related
Im just starting down my dev journey and need some advice on how to approach a simple app I'm working on. I do not have a good understanding of
modern web development.
What I am looking to achieve is to upload a video or image via a browser form / html form to Amazon S3.
Ideally, I want to leverage the AWS node.js SDK but keep my front end as basic as possible (i.e bootstrap page + html changes) I acknowledge that I could do a straight http operation but would still like to leverage the SDK for now.
I have my html,form and css created (using bootstrap), but do not understand how to connect the form to a node.js script that does the authorization/PUT?
Can I even go from the form, and pass the file to the script to be uploaded?
Thanks for any advice!!! :D
Check out the AWS documentation. They even have an example for your use case: Uploading Photos to Amazon S3 from a Browser
You can use, AWS CloudFront Signed URLs to perform the upload. The flow involved are as follows.
From the browser, you will request for a url, with an expiration time, to allow upload a file to a bucket. You can write Sign url creation using NodeJS Backend and AWS SDK as given in this example, after authenticating the user.
Using the Signed URL and AWS JavaScript SDK for S3, browser can directly upload the file to S3.
For more information about Signed URLs, check How Signed URLs Work.
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
I want to stream data from my Dropbox to webpage in real time, but don't know how to do it.
It's usually a bad idea because Dropbox can throttle speed, stop sharing file when using from many locations.
You can install Dropbox to your server and sync some folder with your Dropbox:
https://www.dropbox.com/install
And to stream from your local folder is easier task.
But if you really need to get files from Dropbox real-time, you can use their API. They've got libraries for many languages. For example this one is for PHP, also tutorial there:
https://www.dropbox.com/developers-v1/core/start/php
I'm looking for a front-end solution for uploading files to amazon s3 (that is, not passing them through my server.
The solution I have found is
https://code.google.com/p/swfupload/
It might do the job, but it requier flash and this is the first sentence of the project description is:
SWFUpload has not been under active development for several years.
Here are my desired features, though none of them are nessesary
No plugins
Built with Amazon S3 in mind, handling buckets authentification etc.
Some way to see file upload-progress
Support from IE8+
kgu87 is correct, this article pretty much explains the entire process to upload files directly to S3 without passing them trough your own server.
You can also check out the AWS docs related to this on:
http://docs.aws.amazon.com/AmazonS3/latest/dev/UsingHTTPPOST.html
http://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPOST.html
If you're looking for an upload tool that supports HTML5 uploads directly to S3, check out Plupload
They have a great article that explains how to set it up:
https://github.com/moxiecode/plupload/wiki/Upload-to-Amazon-S3
The documentation describes a PHP service that's used to generate a policy and signature (both are required for S3 to accept your download) but you can use any language to generate those. Also, in certain use cases, you can just generate a one-time policy with a very high expiration time and hard code it into your upload form.
You could start by using this tutorial as a baseline , if you are asking about uploading from your web app -
http://aws.amazon.com/articles/1434
You could use this tool: http://aws.amazon.com/customerapps/Amazon-S3/Consumers/2069 free, and works in most browsers; doesn't require a server.
S3 Browser is a free client interface for users of the Amazon S3 service.
It provides an easy to use GUI to manage your storage buckets and allows you to:
- Browse, create, delete Amazon S3 buckets
- Upload and download files to and from Amazon S3
- Create public URLs to share the files.
- Keep your files backed up on a multiple data centers.
- Set Access Control on buckets and files.
S3 Browser is free for non-commercial use.
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.