Parsererror when upload to aws s3

[noivuduc]

Hi all, I got this issue while uploading to aws s3. Anyone have idea about this issue?

[inventionlabsSydney]

I'm getting the same thing, will investigate and hopefully figure it out :)

[artilery]

Same issue

[ruanltbg]

You are receiving it because you do not have this success_action_status set to 201. When you have 200 or 204 status, the AWS is going to return no content, but it tries to parse to XML, this is why you get this message.

If you have a 201 response, it comes with an XML.

https://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPOST.html#RESTObjectPOST-requests-responses-response-elements

[inventionlabsSydney]

Hi Ruan, s3 compliance means that this should also be 204 and 200 compliant based on the success_action_status not the app expecting success_action_status to be 201. I have made a PR for this: #461

s3 compliant storage like Minio are unable to be used properly without this.

[ruanltbg]

Agreed, but still. This error is just because the amazon is not responding 201, thus, no XML response body. But yeah, it took some time for me to realize it.

[scottweinert]

Was anyone able to resolve this? What change did you make?

[scottweinert]

@inventionlabsSydney I tried using your forked version of the repo, but I get the same error :(

[inventionlabsSydney]

Hey @scottweinert Can you provide me some context, maybe pass me the error, what your config is and I'll have a look?

[inventionlabsSydney]

Also @scottweinert what branch did you work from on mine?

[scottweinert]

@inventionlabsSydney I used your master branch of https://github.com/inventionlabsSydney/vue-dropzone.

On Chrome, I get this after upload:

On Firefox I get this:

Image is successfully added to my S3 bucket, but the success/error callbacks don't trigger due to these errors I believe.

I also tried forking your repo and rebuilding to make sure the dist folder was updated https://github.com/scottweinert/vue-dropzone

[inventionlabsSydney]

What's your config? and what's your backend service?

[scottweinert]

@inventionlabsSydney I'm using a Node serverless backend to generate the presigned request. That seems to be working just fine on local, and production. Here is a gist to my Vue component:

https://gist.github.com/scottweinert/73a87dcb3f6ba63950bf0adcf52edcb8

[Fingel]

It took me a while to figure out how to work around this without using a fork, but it's possible thanks to @ruanltbg 's hint. You need to set the sucess_action_status form data to 201. In your dropzoneOptions:

      dropzoneOptions: {
        thumbnailWidth: 200,
        addRemoveLinks: true,
        params:{
          success_action_status: 201
        },
      },

But you also need to allow this parameter to be set in your POST policy or else you'll get an error from s3: Invalid according to Policy: Extra input fields: success_action_status This happens on the server side where you generate the signed request. I'm using the boto3 python library, and it looks something like this:

        presigned_post = s3.generate_presigned_post(
            Bucket=settings.AWS_BUCKET,
            Key=filePath,  
            Fields={"Content-Type": contentType},
            Conditions=[
                {"Content-Type": contentType},
                ["starts-with", "$success_action_status", ""],
            ],
            ExpiresIn=3600
        )

The relevant part there is the ["starts-with", "$success_action_status", ""], part.

Now s3 will return with a status 201 instead of 204, allowing the existing code path in vue2-dropzone to work correctly.

Hopefully the aforementioned PRs get merged so we don't have to work around this!