How to access the original form of an HTML form?

Question

I make some interface elements for a Rails application, and I don’t have to bother with the backend architecture. Basically, I have to allow users to upload the file and make this presentation, essentially, directly to Amazon through the form processed by CarrierWave. If you have ever tried to do the same with ajax, you will know that it is almost impossible.

This puts me here: I need to be able to call .submit() on the html form element and then connect to the download progress, as if I were listening to the progress event in XMLHttpRequest.

Sorry I don’t show tons of code. I'm really just looking for two very simple things.

• Is it possible to catch a form-based development event?
• If so, what is the main technique? Is it something simple like form.addEventListener('progress', function () {...}) ? (<- This does not work, by the way.)

Answer 1

I do not think that you can make progress in loading on a standard form.

So, I have not tested this, but why not submit the form via AJAX? You can upload files using the FormData object, which can handle multiple requests for upload.

Something like this might work:

 // grab the form you want to submit. var formElement = document.getElementById("myFormElement"); // make an xhr object var request = new XMLHttpRequest(); // track progress request.upload.addEventListener('progress', progressHandler, false); // setup request method and url request.open("POST", formElement.action); // send the request request.send(new FormData(formElement)); 

You will need to listen to the server’s response and do what it tells you, redirect or handle failures or something else. But I think this should work. The server you are sending to is probably not worried if it is an xhr request or a standard browser request.

And it should work in all modern browsers.

---

See documents in FormData .

And here is a link to these details , how to track progress when loading ajax.