Skip to content

Commit

Permalink
I have my own service around $http. This service set special header…
Browse files Browse the repository at this point in the history
…s, and authorisation before get policy. So I cannot provide url. So I made that you have another option when you can set policy with you got as an object with your own request. The only problem for now is that the way you are dialing with attributes, is not 2 way and this parameter have to be resolved before assignment. That is ok for me because I use router ui and I can resolve things.
  • Loading branch information
Serhioromano committed Jan 4, 2015
1 parent db83254 commit 0905c08
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 21 deletions.
31 changes: 16 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@ ng-s3upload - Upload to S3 using AngularJS

An AngularJS directive that allows you to simply upload files directly to AWS S3.

## Setup
## Setup
1. Create AWS S3 bucket

2. Grant "put/delete" permissions to everyone
In AWS web interface, select S3 and select the destination bucket, then
2. Grant "put/delete" permissions to everyone
In AWS web interface, select S3 and select the destination bucket, then
expand the "Permissions" sections and click on the "Add more permissions" button. Select "Everyone" and "Upload/Delete" and save.

3. Add CORS configuration to your bucket

In AWS web interface, select S3 and select the wanted bucket.
Expand the "Permissions" section and click on the "Add CORS configuration" button. Paste the wanted CORS configuration, for example:
In AWS web interface, select S3 and select the wanted bucket.
Expand the "Permissions" section and click on the "Add CORS configuration" button. Paste the wanted CORS configuration, for example:
```XML
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
Expand Down Expand Up @@ -41,7 +41,7 @@ expand the "Permissions" sections and click on the "Add more permissions" button
Once the CORS permissions are updated, your bucket is ready for client side uploads.

4. Create a server side service that will return the needed details for uploading files to S3.
your service shall return a json in the following format:
your service shall return a json in the following format:

```json
{
Expand All @@ -53,7 +53,7 @@ your service shall return a json in the following format:
XXX - A policy json that is required by AWS, base64 encoded.
YYY - HMAC and sha of your private key
ZZZ - Your public key
Here's a rails example, even if you're not a rails developer, read the code, it's very straight forward.
Here's a rails example, even if you're not a rails developer, read the code, it's very straight forward.

For a php example, please refer to [this guide](https://github.com/asafdav/ng-s3upload/wiki/PHP-Creating-the-S3-Policy).
```ruby
Expand All @@ -75,7 +75,7 @@ Here's a rails example, even if you're not a rails developer, read the code, it'
Base64.encode64(
{
"expiration" => 1.hour.from_now.utc.xmlschema,
"conditions" => [
"conditions" => [
{ "bucket" => GLOBAL[:aws_bucket] },
[ "starts-with", "$key", "" ],
{ "acl" => "public-read" },
Expand All @@ -89,16 +89,16 @@ Here's a rails example, even if you're not a rails developer, read the code, it'
Base64.encode64(OpenSSL::HMAC.digest(OpenSSL::Digest::Digest.new('sha1'), GLOBAL[:aws_secret], s3_upload_policy)).gsub("\n","")
end
```

The following code generates an upload policy that will be used by S3, in this example the maximum file size is limited to 10MB (10 * 1024 * 1024), update it to match your requirments. for a full list of S3's policy options, please refer to [AWS documentation](http://docs.aws.amazon.com/AmazonS3/latest/dev/HTTPPOSTExamples.html#HTTPPOSTExamplesTextAreaPolicy).


## How to get it ?

## How to get it ?

#### Manual Download
Download the from [here](https://github.com/asafdav/ng-s3upload/releases)

#### Bower
#### Bower
```
bower install ng-s3upload
```
Expand All @@ -125,14 +125,15 @@ npm install ng-s3upload
s3-upload-options="{getOptionsUri: s3OptionsUri, folder: 'images/'}">
```

attributes:
attributes:
* bucket - Specify the wanted bucket
* s3-upload-options - Provide additional options:
* getOptionsUri - The uri of the server service that is needed to sign the request (mentioned in section Setup#4) - Required.
* getOptionsUri - The uri of the server service that is needed to sign the request (mentioned in section Setup#4) - Required if second option is empty.
* getOptions - if for some reason you need to have your own mechanism of getting a policy, you can simply assign your scope variable to this option. Note it should be resolved on the moment of directive load.
* folder - optional, specifies a folder inside the bucket the save the file to
* enableValidation - optional, set to "false" in order to disable the field validation.
* targetFilename - An optional attribute for the target filename. if provided the file will be renamed to the provided value instead of having the file original filename.

## Themes
ng-s3upload allows to customize the directive template using themes. Currently the available themes are: bootstrap2, bootstrap3

Expand Down
19 changes: 13 additions & 6 deletions src/ng-s3upload/directives/s3-upload.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ angular.module('ngS3upload.directives', []).
opts = angular.extend({
submitOnChange: true,
getOptionsUri: '/getS3Options',
getOptions: null,
acl: 'public-read',
uploadingKey: 'uploading',
folder: '',
Expand All @@ -55,7 +56,17 @@ angular.module('ngS3upload.directives', []).
var filename = selectedFile.name;
var ext = filename.split('.').pop();

S3Uploader.getUploadOptions(opts.getOptionsUri).then(function (s3Options) {
if(angular.isObject(opts.getOptions)) {
_upload(opts.getOptions);
} else {
S3Uploader.getUploadOptions(opts.getOptionsUri).then(function (s3Options) {
_upload(s3Options);
}, function (error) {
throw Error("Can't receive the needed options for S3 " + error);
});
}

function _upload(){
if (opts.enableValidation) {
ngModel.$setValidity('uploading', false);
}
Expand Down Expand Up @@ -87,11 +98,7 @@ angular.module('ngS3upload.directives', []).
ngModel.$setValidity('succeeded', false);
}
});

}, function (error) {
throw Error("Can't receive the needed options for S3 " + error);
});

}
};

element.bind('change', function (nVal) {
Expand Down

0 comments on commit 0905c08

Please sign in to comment.