8000 Added functionality to upload files to Amazon S3 by ooqiaDev · Pull Request #342 · nervgh/angular-file-upload · GitHub
[go: up one dir, main page]
Skip to content

Added functionality to upload files to Amazon S3 #342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 5 commits into from
Closed

Added functionality to upload files to Amazon S3 #342

wants to merge 5 commits into from

Conversation

ooqiaDev
Copy link

This change includes two new parameters in the main options of FileUploader class:

s3Upload {Boolean}: Default false, true when using Amazon S3 upload.
s3Options {Object}: Amazon S3 configuration.

$scope.uploaderOptions  =  {
    autoUpload:  true,  
    removeAfterUpload:  false,  
    ...,
    s3Upload: true, 
    s3Options: {
        accessKeyId:  '********************',
        secretAccessKey:  '***********************',
        region:  'us-east-1',
        bucket:  'bucketToUpload',
        folder:  'folderToUpload/'
    }
};

$scope.fileUploader = new FileUploader($scope.uploaderOptions);

The use of the Amazon S3 upload is the same than the normal upload. FileItem are uploaded with upload method. When uploading all queue, uploadAll method must be used.

Note: In this version we are using Amazon SDK 2.1.4 which does not support IE version < 10. See this link for details.

@demisx
Copy link
demisx commented Feb 27, 2015

The thing that really sucks about AWS-SDK is the size. 260KB + for a minified version doesn't sound like a browser friendly version.

@karan-kapoor90
Copy link

has anyone tried this? Does it work?

@karan-kapoor90
Copy link

I tried your code. I created a bucket on s3, added the access-key and the secret-access-key etc but I get the error :

XMLHttpRequest cannot load https://<project_name>-2.amazonaws.com/dummyContent/1432537420888_test%20notes.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://project_hosting_url' is therefore not allowed access.

I've tried playing around with the uploader options and I've enabled CORS on the bucket too as follows :

<?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>DELETE</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Any idea how I can get this to work? Any help would be much appreciated. Thanks

@karan-kapoor90
Copy link

It's working. But only for file sizes < 5 MB. I'm not sure but I think I read something about a 5MB block size for uploads to S3 or something. Any idea what the issue could be ?

@karan-kapoor90
Copy link

Also, how do i get the file location and the name of the new file from this? Doesn't seem to return it anywhere. When the upload is complete, I'd like to store that URL in my DB as a reference... but this doesnt seem to be returning such data.

@karan-kapoor90
Copy link

@ooqiaDev I'm using your fork for a project I'm working on. For that, I need this library in bower. Have you already put it there or not? I hope you don't mind, but I'd like to put it there so I can use it if you don't mind. The credits obviously though, will be all yours :)

@ooqiaDev
Copy link
Author

@karan-kapoor90 Sorry for the delay.

  • I have tested the uploads to S3 with files > 5MB and it worked correctly. I don't know if you are having problems with your filters for the FileUpload class. Do you get some error?. FileUpload class has some helpful methods to handle the uploads. See this link and review the Callbacks section to details.

You have to use the onErrorItem method to get the error:

FileUploader.onErrorItem = function (item, response, status, headers) {
    // Your code here
};
  • Whenever a file is uploaded to S3, the response contains the next information:
{ 
    fileName: '' // The name of the file (I add the timestamp at the end of the name to prevent files with the same name)
    bucket: '' // The bucket where the file was uploaded
    folder: '' // The folder (into the bucket) where the file was uploaded
    url: '' // The full URL of S3 where the file was uploaded
}

You have to use the onSuccessItem method to have access to the response above:

FileUploader.onSuccessItem = function (item, response, status, headers) {
    // Your code here
};
  • Sorry, I don't have added it to bower. Feel free to add it yourself if you need it.

@vasanthns
Copy link

FYI, I was getting following error while uploading files larger than 5 MB (I was using FireFox).

No access to ETag property on response. Check CORS configuration to expose ETag header.

As it clearly stated to Expose the "ETag" header, I made following modification to S3 Bucket's CORS configuration. After this I was able to upload files larger than 5 MB.

http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-configuring.html#Configuring_CORS_for_an_Amazon_S3_Bucket

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>ETag</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

@stweet4000
Copy link

any way to upload to s3, with own signed url (from other method) ?

@nervgh
Copy link
Owner
nervgh commented Feb 26, 2016

Thanks, guys! But I close this PR preferring to #602

@nervgh nervgh closed this Feb 26, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@ooqiaDev @demisx @karan-kapoor90 @vasanthns @stweet4000 @nervgh
0