nukulb / s3-angular-file-upload

Example of S3 file upload using ng-file-upload, angular, nodejs
MIT License
135 stars 34 forks source link

Progress Event is not getting Fired! #12

Open rodrigoreis22 opened 10 years ago

rodrigoreis22 commented 10 years ago

I'm trying to upload a mp4 video and the progress bar doesn't move when the file is uploading. Only when the upload finish it moves to 100%.

Do you know what might be happening?

nukulb commented 10 years ago

@rodrigoreis22 can you provide which browser you are using?

I can have a look at the progress problem today, I recently changed some code in that area so possibly I could have broken something as a side affect.

rodrigoreis22 commented 10 years ago

@nukulb I'm using Chrome 37.0.2062.94 on a Mac OS X 10.9.4.

Thanks for digging into this.

nukulb commented 10 years ago

I have managed to reproduce it, I will have a look in more detail this weekend. ᐧ

On Thu, Sep 11, 2014 at 1:36 PM, Rodrigo Reis notifications@github.com wrote:

@nukulb https://github.com/nukulb I'm using Chrome 37.0.2062.94 on a Mac OS X 10.9.4.

Thanks for digging into this.

— Reply to this email directly or view it on GitHub https://github.com/nukulb/s3-angular-file-upload/issues/12#issuecomment-55299710 .

Nukul Bhasin

danialfarid commented 10 years ago

Try PUT method instead of POST.

rodrigoreis22 commented 10 years ago

@danialfarid I changed from POST to PUT and I'm having this error:

PUT https://xxxx.s3.amazonaws.com/ net::ERR_CONNECTION_RESET

nukulb commented 10 years ago

S3 file upload won't accept a 'put' It has to be a post

Sent from my iPhone

On Sep 14, 2014, at 2:53 AM, Rodrigo Reis notifications@github.com wrote:

@danialfarid I changed from POST to PUT and I'm having this error:

PUT https://xxxx.s3.amazonaws.com/ net::ERR_CONNECTION_RESET

— Reply to this email directly or view it on GitHub.

nukulb commented 10 years ago

@danialfarid So I tried the progress with

"ng-file-upload": "~1.2.9" and progress works perfectly.

With the latest ng-file-upload the progress event never gets fired.

@danialfarid Would you like me to open an issue with ng-file-upload?

@rodrigoreis22 you can downgrade the ng-file-upload to

 "ng-file-upload": "~1.2.9"

in the bower.json file and progress should work perfectly. I will work with @danialfarid and get this resolved and notify you on this github issue.

rodrigoreis22 commented 10 years ago

@nukulb sounds good. Thanks guys.

danialfarid commented 10 years ago

The FileAPI version is changed since version 1.4.0. It is probably because of that and an issue should be opened on FileAPI github once we know exactly what version of FileAPI is not working and could provide a jsfiddle or something to prove.

danialfarid commented 10 years ago

The main angular-file-upload demo http://angular-file-upload.appspot.com/ page now has an option to upload to Amazon AWS S3 and the upload progress is working properly. There is a section added to the readme file https://github.com/danialfarid/angular-file-upload/blob/master/README.md#s3 on how to upload to S3. I tried with both angular-file-upload 1.6.7 and 1.6.8 version and the progress bar is working without any problem.

augiegardner commented 9 years ago

Something about the policy signing wasn't allowing the progress event to fire. I mimicked the demo from the angular-file-upload directly by inspecting the upload.js file on that page. For reference, here's my constructed server side policy using nodejs: var s3Policy = { "expiration": "2020-01-01T00:00:00Z", "conditions": [ {"bucket": "MY_BUCKET_NAME"}, ["starts-with", "$key", ""], {"acl": "public-read"}, ["starts-with", "$Content-Type", ""], ["starts-with", "$filename", ""], ["content-length-range", 0, 524288000] ] } and my params passed to the amaon s3 POST request var dataToPost = { key: 'BUCKET_SUBFOLDER' + file.name, AWSAccessKeyId: s3Params.AWSAccessKeyId, acl: 'public-read', policy: "RETURNED_POLICY_STRING", signature: "RETURNED_SIGNATURE_STRING", "Content-Type": file.type === null || file.type === '' ? 'application/octet-stream' : file.type, filename: file.name };

This was rather frustrating, hopefully it helps someone else.