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.
Related
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 am trying to write my first chrome extension. The workflow goes something like this -When the extension is installed and active if a user hovers over a specific product/ID displayed on the page, the extension retrieves related vendor data about the product with the ID.
This is how I thought about this:
Use jQuery attr to access the ID on mouse over.
Post this ID to a retrieve.php file with .post() method
The retrieve.php file retrieves the data from database
Display the data in a tool tip on the web page.
I have some queries for the above process:
I am able to get this working on a local XAMPP server but how will it work online as the chrome extension will not have access to server. What is the way around to retrieve data without using PHP?
I am able to get the logic working but am unable to place these in respective files - Will all my logic reside in background.js ?
Any suggestions on getting this started will be much appreciated.
You could build a very simple API on your server that responds with JSON to any request it receives after processing it. Like this:
{"firstVar":"foo","secondVar":"bar" }
Your chrome extension can then make an xmlhttp request to this server and and process the returned data.(You could also use JSONP and wrap the response in a callback function which will execute as soon as you have the reponse)
The JS extension will be able to deal with the JSON nicely as it can understand that format so you can then choose to display the data in whatever way you want.
Essentially, what you want is a server that can take an ID posted to it and return the corresponding date in a nice and readable format. And a chrome extension that can make an request to a server and then process the response. Build and test them separately (keep positing an ID to the server and see the response and for your JS side at first instead of making requests to your unfinished API just set a static response to begin with which will be the same as an expected response.
In out website, we wish to present the users with a form that would allow them to upload picture galleries. The form consists of a <textarea> for a description, a <select> with sharing options and the multiple file upload field.
We're using jQuery-file-upload's jquery-ui version, as seen in here: link and our javascript code is pretty much identical. The only significant difference is that we also added a simple submit button, that sends out a POST request to the form's action.
The problem is that we need to reference ALL the files in a GalleryPost object, and the POST request that we get from the form only contains the values of <textarea> and <select>. Which makes sense, since the uploading is done asynchronously via separate requests.
Since we're using OneUpUploaderBundle to handle the actual uploads, we've tried enabling the orphanage feature described here, which kinda helps doing what we want, but as stated in the "known limitations" section, if the user does not submit the form, but starts over with a new one, the previously uploaded files will be submitted, together with the new ones, unless the session id is changed.
Simply put, we need a way to attach a list of files (names would suffice), that have been successfully uploaded, to the form's POST request, so that we could reference them in our GalleryPost object. Or maybe there is some other way to achieve the functionality we need?
I am trying to make an html app for local use, consisting of an HTML page using Google Maps API V3, a SQLite database, and a SimpleHTTPServer script.
The workflow is the following:
User starts the server and opens the page, which contains a map with a set of markers, and a form with filters similar to those of Google Fusion Tables;
User interacts with form, which sets some parameters for a query;
When the user clicks "Submit", page sends a request to HTTPServer, whose request handler queries the SQLite database and returns the result as JSON/JSONP/something-else;
Some function takes back the data and map is updated;
My doubts are more conceptual than anything else, and specifically I would like to know (how/where to look for):
How should I send a request for the server in javascript, and how to listen back to it?
How should the server send data to the request, in order to update its value instead of refreshing the page?
Sorry if my questions seem obvious, but HTTP is something very new to me, and so is client-server communication.
Thanks for reading!
I think you can use CGIHTTPServer.
ref:
http://pydoc.org/2.5.1/CGIHTTPServer.html
Q:How should I send a request for the server in javascript, and how to listen back to it
A:Please google "ajax". "jquery" is one of the most convenient javascript library for ajax.
Q:How should the server send data to the request
A:just use "print" in python script which is called by CGIHTTPServer.
In this case, the output of "print" will be the response to http client(web browser).
In the script mentioned above, you should extract request parameter sent by http client,
with "do_Get()" or do_Post() function.
This is what I have:
User fills very long html form
User gets link to download different pdfs (this are fillable forms), links are generated using javascript
User clicks link, url is generated (with the data the user submitted before), data is processed in the form and fields are completed *this is done using javascript inside the form).
User get pdf back with fields completed.
The problem I'm running is that in some cases the data needed to send to the form is around 8000 characters, when IE only allows 2083 character in the url.
As requested by client, we need to do everything client side, that means no access to php, c#, java. Also I'm using Acrobat Pro X, to work with the pdfs.
Is there a way to submit a post request, process that request in the pdf, fill the form and return the filled form to the user? Is there another way to go around the 2083 character limit of IE?
Why do you need to send 8000 characters of data to the server if you want to fill out the form on the client side? Seems like all you need to do is to establish communication between the JavaScript in the HTML page and the JavaScript in the PDF. This is explained here: PDF hostContainer callback
PS: I'm the author of the book from which this excerpt was taken: http://www.javabeat.net/2011/04/javascript-communication-between-html-and-pdf-in-itext/