Growler Growler - 5 months ago 29
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

PUT
's to s3, I get:

Object: dog-aromatherapy.jpg

Bucket: dderesources
Name: dog-aromatherapy.jpg
Link: This is a public link -> https://s3.amazonaws.com/dde.resources/dog-aromatherapy.jpg
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
image/jpeg
:

enter image description here

But the actual file size is
27.9kb
, meaning the
headers
size of
28.6kb
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: https://s3.amazonaws.com/dderesources/dog-aromatherapy.jpg

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

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

dde-resources

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
Comments