Send only the file's info and URL to backend after S3 upload.

[adnanmuttaleb]

Their is a note in the docs that says:

Firstly, your file is uploaded to S3 then request is sent to your server with file as expected behaviour. But extra field to your request will be added as s3ObjectLocation containing location of your S3 object/file, which you may require to store in database.

Is it possible to send only the file info (s3 object URL) to server instead of the whole file, because In my use case I do not need the file, and the uploads that I am expecting are large in size?

[adarshmadrecha]

Try this :

in your awss3 params, set sendFileToServer to false

[adnanmuttaleb]

@adarshmadrecha this will stop everything from being sent.

[tylercollier]

Thanks for mentioning sendFileToServer as its behavior is undocumented. @adnanmuttaleb is correct that if you use it, nothing will be sent to your server, but that's better than sending the file twice. You can still handle sending the location of the file uploaded to S3 to your server yourself, but there is a bug to be aware of.

The bug only occurs when you have uploadMultiple set to true in the options you pass in (that get passed directly to dropzone). If you set sendFileToServer: false as mentioned, you'll see this error when uploading to S3:

AWS S3: MaxPostPreDataLengthExceeded Your POST request fields preceeding the upload file was too large

The error is dicussed here (as a comment to a Stackoverflow question). The problem happens because the key in the multipart form data uploaded is file[0] instead of file. This happens in the dropzone code, and probably isn't a bug with Dropzone, but becomes a bug when used with vue2-dropzone that includes S3 integration.

To fix, pass a function like this as part of the dropzone options:

paramName: () => 'file'

That's all to fix the bug.

To get the URL of the asset uploaded to S3, pass this function in the dropzone options:

successmultipe: (fileList, response) => {
  const location = response.match(/<Location>(.*)<\/Location>/)[1]
  // location contains the URL of the asset just uploaded to S3
}

Then you can take that location and send it to your server using axios, fetch, etc.