AWS S3 Upload - I can figure out why it doesn't work with me

[devahmedshendy]

I am trying to use vue-dropzone component for AWS S3 upload, here is the vue-dropzone component in the project:

<vue-dropzone
   id="dropzone"
   ref="newUploadDropzone"
   :class="'text-center'"
   :awss3="awss3"
   :options="dropzoneOptions"
   :destroyDropzone="true"
   @vdropzone-sending="sendingEvent"
   @vdropzone-s3-upload-error="s3UploadError"
   @vdropzone-s3-upload-success="s3UploadSuccess"
   @vdropzone-file-added="fileUploaded"
 >
 </vue-dropzone>

And here are the dropzoneOptions and the awss3 I used (awss3 is set dynamically by requesting the a file upload policy from the backend):

dropzoneOptions: {
  url: 'https://bucket-name.s3-us-east-1.amazonaws.com/',
  headers: {},
  thumbnailWidth: 200,
  addRemoveLinks: true,
  dictDefaultMessage: "<i class='fa fa-cloud-upload'></i> UPLOAD ME"
},
awss3: {
  signingURL: 'https://bucket-name.s3-us-east-1.amazonaws.com/',
  headers: { },
  params: { 
    key: '***',
    acl: '***',
    'X-Amz-Credential': '***',
    'X-Amz-Algorithm': '***',
    'X-Amz-Date': '***',
    'Policy': '***',
    'X-Amz-Signature': '***'
  }
}

With the previous settings I got this error as a response from AWS S3:

<Error>
  <Code>InvalidArgument</Code>
  <Message>POST requires exactly one file upload per request.</Message>
  <ArgumentName>file</ArgumentName>
  <ArgumentValue>0</ArgumentValue>
  <RequestId>0F01D682AE902DE3</RequestId>
  <HostId>WC27fBttONwueCXg38xOh2TDUmEsazhdQR/LJOP0zjb1ruhUON+JM2f36dSt9Yu8twqNFTN7I4U=</HostId>
</Error>

Then, I used the following function to add file param to the awss3 option once the vdropzone-file-added get triggered:

fileUploaded (file) {
  this.awss3.params.file = file
}

And after I still get an error as following:

<Error>
  <Code>AccessDenied</Code>
  <Message>Invalid according to Policy: Extra input fields: filepath</Message>
  <RequestId>B43BD875E19A39A5</RequestId>  
  <HostId>I1UNlTbCMlexW3qt1MI8xXk4/v2ZC0yoAs4azU2+u6HtA9bXUUeN2J9YL51HvdqeFM0c3cdis6o=</HostId>
</Error>

I tried to use vdropzone-sending, but I don't know why this function isn't called like fileUploaded function:

sendingEvent (file, xhr, formData) {
  console.log('here') // Never reached
}

So what do you think? Anyway I can fix this.

Btw, here is the CORS configuration for the S3 bucket:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>Location</ExposeHeader>
    <ExposeHeader>x-amz-request-id</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Thanks

[devahmedshendy]

I started to believe sendingEvent is only working in the normal mode, and doesn't work in AWS S3 mode. Just tested it right now in the normal upload mode, and it works.

[vrajroham]

@devahmedshendy Sorry for the late reply.

I started to believe sendingEvent is only working in the normal mode, and doesn't work in AWS S3 mode. Just tested it right now in the normal upload mode, and it works.

Thanks for mentioning this. I'll look into this.