How to get Amazon S3 Response Headers using Dropzone JS?

Question

I am developing a new website where users can upload files to an Amazon S3 bucket. After evaluating different upload libraries for jQuery I finally chose Dropzone JS.

I was able to integrate Dropzone into my application in order to upload files directly to an Amazon S3 bucket. Everything is working fine with the upload.

However I am having troubles reading the response from Amazon using jQuery. In particular, I'd like to get the Location header that comes as a response from Amazon. This location header has the information I need to process the uploaded file, but I am unable to get it using Dropzone. Anyone can advice how to get the XHR response headers? Checking the code I don't think this is possible, seems we can only get the response text but not the headers.

Answer 1

see How to get read data from response header in jquery/javascript for obtaining the response info.

Assuming you are using the AWS POST operation http://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPOST.html

I suspect that the URI it returns is the one with amazon's domain: https://s3.amazonaws.com/Bucket/Object

if you are using a "web" bucket and want to use your custom domain you will have to figure that out for yourself. You already have the bucket name since you provided it in the call.

Another wrinkle could be the permissions of the file after upload. Be sure to set a policy on the paths for the uploads appropriately.

Answer 2

According to the creator of dropzone, The XHR object is stored in the file itself as file.xhr. So if you want to access its parameters, you would have to do console.log(file.xhr."what you want to access")

I suggest you console.log(file.xhr) to see its contents first. It would give you an idea of the values that are available.

However, the Response headers are "unsafe" and can not be viewed except you add a CORS policy to your bucket that marks them as safe.

So if you want to access the Location header for example, you would need to add

<ExposeHeader>location</ExposeHeader>

to your CORS policy. Then you can now access it like so

console.log(file.xhr.getResponseHeader("Location"));

Sorry to resurrect an old thread