A simple helper for easily uploading files to Amazon S3 from Meteor. This package will also make Knox available server-side.
S3 provides a simple way for uploading files to the Amazon S3 service with a progress bar. This is useful for uploading images and files that you want accesible to the public. S3 is built on Knox and AWS-SDK. Both modules are made available on the server after installing this package.
If you want to keep using the older version of this package (pre 0.9.0) check it out using meteor add lepozepo:s3@=3.0.1
If you want to keep using the version of this package that uses server resources to upload files check it out using meteor add lepozepo:s3@=4.1.3
S3 now uploads directly from the client to Amazon. Client files will not touch your server.
Star my code in github or atmosphere if you like my code or shoot me a dollar or two!
In line with Meteor's move towards NPM, I'm moving this package to NPM. Along with this move, I'll resolve issues with importing the uploader and making it easy to use in React and React Native. I've already started migrating but I'm only half way there, have a look at the repo here
$ meteor add lepozepo:s3
Define your Amazon S3 credentials. SERVER SIDE.
S3.config = {
key: 'amazonKey',
secret: 'amazonSecret',
bucket: 'bucketName',
region: 'eu-west-1' // Only needed if not "us-east-1" or "us-standard"
};
Create a file input and progress indicator. CLIENT SIDE.
<template name="s3_tester">
<input type="file" class="file_bag">
<button class="upload">Upload</button>
{{#each files}}
<p>{{percent_uploaded}}</p>
{{/each}}
</template>
Create a function to upload the files and a helper to see the uploads progress. CLIENT SIDE.
Template.s3_tester.events({
"click button.upload": function(){
var files = $("input.file_bag")[0].files
S3.upload({
files:files,
path:"subfolder"
},function(e,r){
console.log(r);
});
}
})
Template.s3_tester.helpers({
"files": function(){
return S3.collection.find();
}
})
For all of this to work you need to create an aws account.
index.html
file (anywhere is ok, I put it in root).Index Document
input with the path to your index.html
without a trailing slash. E.g. afolder/index.html
, index.html
You need to set permissions so that everyone can see what's in there.
Select the bucket's properties and go to the "Permissions" tab.
Click "Edit CORS Configuration" and paste this:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Click "Edit bucket policy" and paste this (Replace the bucket name with your own):
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOURBUCKETNAMEHERE/*"
}
]
}
Click Save
It might take a couple of hours before you can actually start uploading to S3. Amazon takes some time to make things work.
Enjoy, this took me a long time to figure out and I'm sharing it so that nobody has to go through all that.
This is a null Meteor.Collection that exists only on the users client. After the user leaves the page or refreshes, the collection disappears forever.
This is the upload function that manages all the dramatic things you need to do for something so essentially simple.
Parameters:
new File()
. Either this otpion or 'files' just be provided./ The following function simply replicates the default behavior.
unction(f) {
var extension = f.type.split("/")[1];
return Meteor.uuid() + "." + extension;
This function permanently destroys a file located in your S3 bucket.
Parameters:
This is where you define your key, secret, bucket, and other account wide settings.
Parameters:
S3.config = {
key: 'amazonKey',
secret: 'amazonSecret',
bucket: 'bucketName'
};
This is a function that runs every time someone uses the delete function on the client side. The context of this
for the function has access to the path
and this
from a Meteor.method.
The current knox client.
The current aws-sdk client.
http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/frames.html https://github.com/Differential/meteor-uploader/blob/master/lib/UploaderFile.coffee#L169-L178
http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html http://docs.aws.amazon.com/general/latest/gr/sigv4-signed-request-examples.html https://github.com/CulturalMe/meteor-slingshot/blob/master/services/aws-s3.js