Growler Growler - 1 year ago 99
AngularJS Question

Uploading presigned image to s3 from Angular - image does not appear

I'm using Angular to upload images to s3 bucket, using a presigned URL received from my Laravel server.

The file seems to upload fine with the correct content types. If I click on the s3 file after the Angular upload

's to s3, I get:

Object: dog-aromatherapy.jpg

Bucket: dderesources
Name: dog-aromatherapy.jpg
Link: This is a public link ->
Size: 28660
Last Modified: Tue Jun 14 14:51:13 GMT-400 2016
Owner: myusername
ETag: f478788943af2296223a0f45a9c50610
Expiry Date: None
Expiration Rule: N/A

Meta data is correct as

enter image description here

But the actual file size is
, meaning the
size of
is expecting an extra ~700b or so that is missing...

enter image description here

When I click on the image to view, it shows a white minibox:

enter image description here

Try it yourself:

Angular Upload Code:

var upload_file = function (file, response) {

var formData = new FormData();

formData.append('image', file);

return $http({
method: 'PUT',
url: response.signed_request,
data: formData,
headers: {
'Content-Type': file.type
cache: true

Why is this?

Answer Source

Remove the period "." from your bucket name and make it some thing like this this will resolve the issue


As bucket names with a period "." does not go very well when you are using resigned URL's in your code.

And use below statement in your angular code

processData: false
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download