How to send multiple POST requests in JavaScript

Question

I have a html form that contains some fields to include user credentials and a file input, something like this:

<form action="">
    username: <input type="text" name="name" id="name"> <br/>
    secret key: <input type="password" name="key" id="key"> <br/>

    <input type="file" name="actual_upload" id="actual_upload">
</form>

I want to upload the file to server S2 only after the user credentials has been verified, and a unique token has been generated by another server S1 (returns the token as JSON).

One way I thought of doing this is posting it to S1 and then forward the request from S1 to S2. But this way I have to receive the complete request in S1, which unnecessarily increases S1's load.

If I put the user credentials in the request header instead of the request body, is there a way to send only the headers to S1 and then after receiving the token, use that to send the file to S2 ? Or is there another way?

i don't think so this is related with JS alone anymore.. You should make the backend do the job instead of frontend — Kasnady, Feb 22 '18 at 05:55
yeah, use AJAX - you can make the second request once the first request returns the token for you — Jaromanda X, Feb 22 '18 at 05:56
no, because there's literally a billion examples on SO alone :p — Jaromanda X, Feb 22 '18 at 06:00

score 1 · Accepted Answer · answered Feb 22 '18 at 10:47

As others have mentioned in comments, you can use either AJAX or Promises. A simple implementation would be to use the fetch API.

Here's a sample code structure that you can use (I'm assuming you do have a submit button in your form):

document.getElementById('submit').addEventListener('click', uploadFile);

function uploadFile() {

    event.preventDefault();

    let name = document.getElementById('name').value;
    let key = document.getElementById('key').value;

    let S1Url = // endpoint where token will be generated 

    fetch(S1Url, {
        method: 'GET',
    }).then(function(response){
        // extract token from JSON response
        // return token
    }).then(function(token) {
        let S2Url = // endpoint where file will be uploaded

        // file that has been selected in the form
        let input = document.querySelector('input[type="file"]');

        let data = new FormData();
        data.append('file', input.files[0]);

        return fetch(S2Url, {
            method: 'POST',
            body: data
        });

    }).then(function(response){
        // do something with the response
    }).catch(function(error) {
        // handle error
    });
}

Checkout this MDN documentation where there are good number of examples that uses fetch API. Also, take a look at this answer here.

How to send multiple POST requests in JavaScript

1 Answers1