How to get Amazon S3 Response Headers using Dropzone JS? - javascript

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.

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.

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

Related

How to generate ASW s3 presigned URl from php and then upload multiple files in that url from javascript?

I want to upload multiple files from browser with axios into s3 bucket. I am using aws-sdk-php library in laravel. My intention is when I want to upload one or multiple files,
I will send a GET request to backend(laravel) for a presigned URL.
After receiving the URL I will make a PUT/POST request to that URL with all the files.
I have read the aws-sdk-php docs and found some problems with my intention.
I have seen that I need to give a Object Key when I want to generate a presigned URL. In the docs and other articles they are using file_name as Key. But for my purpose I cannot send multiple file_names since it doesn't make sense.
Then I thought of generating a UUID and use it as Key. But then how would I access my files individually later? I didn't get any reference to that part.
Can anyone help me with these problem?

Count of JS S3 Object Access

In my app, my customers can create small widgets with text fields and text. They can customize the look and feel through JS and CSS. I upload the JS and CSS in my S3 bucket and use Cloudfront for CDN.
Once the widget is created, they can embed the widget on their website using embed code.
In the embed code, I have used a 1x1 pixel image which is used to send request to php so I can increase the visit counter.
public function track(Request $request) {
// increase stored number here
header('Content-Type: image/gif');
return base64_decode('R0lGODlhAQABAJAAAP8AAAAAACH5BAUQAAAALAAAAAABAAEAAAICBAEAOw==');
}
My server is getting overload because of the visit counter. I want to now track the number of visits to embedded widgets for each customer by using S3 and Cloudfront access count.
I searched and found - Getting the download count of a specific S3 object, but it is for download.
How can I get the count of times when S3 object is accessed?
Use cloudtrail to and parse the logs. List of actions trackable by cloudtrail on s3
You can use URL shortener service to redirect to your file (like goo.gl, bit.ly), they will track number of clicks,views etc, and it wont even overload your server.
Hope it helps.

How can I check s3 file uploaded or not using javascript

I'm implementing a direct pdf file upload from client machine to Amazon S3 via REST API using only Go langangue, All works fine but one thing is worrying me...
Here is the steps
User click on pdf button
New browser tab is open there is in html page(which says generating
your report)
On background pdf file is uploading(in process) on s3. And API return s3
url to client.
Problem
how can I check if the URL is active yet or not. If it's a 404 it doesn't redirect… waits another N seconds. Once it's a 200, then I redirect to s3 url.
How can I achieve this on javascript ?
AWS S3 ensures GET after PUT consistency for new objects. From https://aws.amazon.com/s3/faqs/
"
Q: What data consistency model does Amazon S3 employ?
Amazon S3 buckets in all Regions provide read-after-write consistency for PUTS of new objects and eventual consistency for overwrite PUTS and DELETES.
"
This ensures that once the upload is done, your object will be reachable. Now, with JS you can issue an Ajax request only if you're on same domain or you enable CORS on your S3 bucket. This is explained here: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html and it will allow you to check your object on S3 being there.
Otherwise, you would need a server-side component to check if the object is uploaded and call that resource from JS on the same domain.

Fineuploader uploading directly to Azure Blob Storage - get file uri within Javascript

I am uploading files via fineuploader directly to Azure Blob Storage and I want to know if I can access file URI (on Azure Blob Storage) once file is uploaded?
I understand that I can call API where fineuploader provides all kinds of information which is described in http://docs.fineuploader.com/branch/fix_thumbnail-performance/endpoint_handlers/azure.html#optional-server-side-tasks but I wonder if there is some possibility to access this information (file uri etc) in javascript callback - without sending it to any API.
I'm not sure what your definition of "API" is. I assume you mean that you simply don't want to make extra calls to the server.
You can return any information needed by your client-side code your response to Fine Uploader's upload success POST. The parameters will be made available to your onComplete callback handler.
There are also a large number of API methods that may be of use, including one to retrieve the file name.
I resolved this one. I am using internal API of fineuploader - I didn't find it documented anywhere.
In complete event I am calling this:
var blobName = $(this).fineUploaderAzure("getBlobName", id);
Edit:
As Ray mentioned in comment below this feature is documented in official documentation

Amazon S3 POST, event when done?

I'm using Amazon S3 with a simple project, when the user uploads a file, I first use an XMLHTTPRequest to send the details to my database, then trigger the form POST that uploads the file straight to S3.
What I can't quite work out though is how to tell when the upload is done so I can update the display properly (I'm cheating at the moment and just updating the display once it's saved in the database, you can barely tell for small uploads, but obviously a problem in the long run.)
The S3 server appears to "cancel navigation" once the upload is complete, so the page doesn't reload - are there any events that are fired that I can use to detect when the upload is complete?
EDIT: I'm using the form code from here http://s3.amazonaws.com/doc/s3-example-code/post/post_sample.html just added an onsubmit to the form that fires the XMLHTTPRequest to my own server before the form gets posted to amazon.
Amazon S3 will redirect to the url specified in the success_action_redirect field or if that's not specified, it returns an empty document with the status code specified in success_action_status.
On completion of the POST, the user is redirected to the location that you specified in the success_action_redirect field. If Amazon S3 cannot interpret the URL, it ignores the success_action_redirect field.
If success_action_redirect is not specified, Amazon S3 returns the empty document type specified in the success_action_status field.
If the POST fails, Amazon S3 displays an error and does not provide a redirect.
See the AWS docs for more details.
Amazon S3 won't trigger any kind of event, but your XMLHTTPRequest code should be able to trigger a callback when S3 returns an HTTP 200 status code.
If S3 isn't returning a successful response code, it's quite possible that S3 doesn't know that your upload is complete. Are you sending a Content-Length header as part of your request?

Categories

Resources