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?
Related
How do I track the upload progress of a multipart/form-data POST request? I am using request#2.88.2 with NodeJS v13 and a quick google search led me to Upload Progress — Request, the setInterval() implementation worked fine for a direct single file upload, but when uploading multiple files with multipart/form-data it just goes from 0 to 100% almost instantly (AKA doesn't work, useless).
I couldn't find any other existing solutions anywhere else on the Internet so I'm asking here at last.
My current code can be found here: https://hastebin.com/uqobihuyab.js
I'm trying to learning html and javascript and i gave myself this little task, I'm logged into a Instagram and I want to make a Post request for upload an image. I analized how the upload works and tried to figure out how to accomplish the task.
For manually upload an image this steps are done:
click the upload button ( is a <span> not into a form)
the file manager popus and the user select the image
you are redirected to another page and the image is uploaded
Once the upload button is clicked a post reuqest is raised to https://www.instagram.com/rupload_igphoto/fb_uploader_<image_id>, in the request payload there are the image binary datas and there are some custom headers that specify the image id and other image datas.
I'm trying to find a way for do the same thing.
I thought that i can add inside the html page a custom form that send a POST request to the rupload_igphoto/fb_uploader_<image_id>, in this way i can persist all the coockies and the session datas but I don't know how to change the request headers and send as request payload the Image binary datas.
If i analize the request with network dev tools i can see
Inside the request parameters:
- request payload: "ß\µÙº¦ÙÆëºÀF·GÇ&ØËUwp8çÓ4sÚdSkðEªì®[|<§îÿ...." ( that are the binary datas of the image)
Request custom headers:
- X-Entity-Length: 370266
- X-Entity-Name: fb_uploader_1577544947097
- X-Instagram-Rupload-Params
:{"media_type":1,"upload_id":"1577544947097","upload_media_height":1080,"upload_media_width":1080}
so let's say that i create a new form node inside the isntagram window,
<form action="rupload_igphoto/fb_uploader_<image_id>" method="POST" style="z-index: 10">
</form>
and that i know the image binary datas, how can i add the headers to the reqeust and the binary datas to the payload?
You cannot add headers to forms, read more.
You can use XHR to send data with JS but it's very likely that Instagram has tools to block this kind of attempt (the fact that it's not a form is probably one of them).
The reason for this is to limit the amount of uploads and avoid turning the platform into a image backup service. If they intended users to have the ability to programmatic upload, they would provide an API with credentials and stuff.
That said, if you are persistent enough you still might be able to do it, just keep in mind that you will be encountering some weird problems on your way.
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.
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
I have a pretty standard upload form - user picks a file, then hits the upload button. But now I need to add data to the post - after the user picks the file, but obviously before the post leaves the browser. Note that the post is a direct post to a third party (Amazon S3).
Is there a way to make a form with a file picker (or something that looks like one), then the user picks a local file, then hits a button, => javascript calls my server, gets a response, builds the 'real' post and then sends this new post to a third party server.
Basically, until the user picks the file, I don't know a few things (mime type). I know that browsers send this info, but Amazon AWS pre signed posts ignore what the browser says.
I can hit my server (ruby sinatra) with an ajax call from the javascript, which will return some JSON, etc to the script, which will then post to Amazon S3.
My problem could just be my newbieness to javascript...
You can add hidden fields to the form with the file in it. Do your intermediate request, fill the hidden fields. Submit the original form.