CODEWITHSUNDEEP
angularjsimagelaravelamazon-s3
user3871
user3871

Reputation: 12718

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?

Upvotes: 0

Views: 825

Answers (1)

Code-pro9081
Code-pro9081

Reputation: 71

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

Upvotes: 1

Related Questions