0

I want to implement an upload file function and thus need to do an Axios post request, which requires a token for the user, to the server and after each upload is completed the token for the user is changed. So when the same is implemented for uploading multiple files the token gets changed after the first file upload is complete and thus the request for the second file gives an error as it already sent a request with the previous token.

I need to implement Axios requests for the upload function one at a time and store the requests in a queue and send them to the server one by one. How to implement this?

Edit: I don't need the entire code. I will be able to write the code but I want to know how can we implement it. I searched on google and the closest I could find something was of concurrency in promises. And I tried to fetch in a for loop and the same error appeared because I need to wait for the first fetch statement to complete and then get the new token and then request using that token. If I use the synchronous method then the UI will be stuck causing a bad user experience

 axios({
      method: "post",
      url: `url`,
      headers: {
        "Content-type": "multipart/form-data",
        token: localStorage.getItem("token"),
      },
      data: formData,}).then(response=>{localStorage.setItem("token", response.data.newtoken);})

I need to send this new token with the file being uploaded next.

The_Night_Wolf
  • 1
  • 1
  • Sorry, this is off-topic for Stackoverflow. We're here to help people debug their existing code, not to write code for them, develop their solution or recommend tutorials or libraries. If you have no idea how to do this, please try to do some research first, there are plenty of free tutorials all over the place. (Also you don't need Axios, just use the native `fetch` in a for loop) – Jeremy Thille Jun 10 '21 at 06:24
  • @JeremyThille I don't need the entire code.. I will be able to write the code but I want to know how can we implement it.. I searched on google and the closest I could find something was of concurrency in promises. And I tried to fetch in a for loop and the same error appeared because I need to wait for the first fetch statement to complete and then get the new token and then request using that token. If I use the synchronous method then the UI will be stuck causing bad user experience – The_Night_Wolf Jun 10 '21 at 06:35
  • Show us what you have tried. Making and awaiting one request and then making another one in a loop should be pretty simple. What have you tried that doesn't work? – deceze Jun 10 '21 at 06:37
  • You don't need the entire code, but you're still asking somebody to spend a long time designing your solution. Coming up with a multiple file upload feature with a queue and error management isn't something one does in 5 minutes. It's days of work. I'm afraid you need to hire a developer for that :/ – Jeremy Thille Jun 10 '21 at 06:42
  • @deceze I trigger the Axios request given in question once a file is selected in the input tag. What I want to implement is that if the request is not yet completed then hold the second request until the first is completed and then send the request with the correct token. – The_Night_Wolf Jun 10 '21 at 06:47
  • You probably either want to `await` in a loop, or produce a promise `then` chain programmatically. Both techniques are shown here: https://stackoverflow.com/a/24586168/476 – deceze Jun 10 '21 at 06:49
  • @JeremyThille I just want to find out is there any library or method that can be used to queue the requests. – The_Night_Wolf Jun 10 '21 at 06:53
  • @deceze yes I went through this chain but this can be implemented only while resolving the promise. I need to implement this while sending the request itself.. resolving the promise for multiple files is not causing any issue – The_Night_Wolf Jun 10 '21 at 06:56
  • Unclear what that means or how it's a problem. `files.reduce((p, file) => p.then(() => axios({ ... })), Promise.resolve())`. Something like this. Or: `for (...) { await axios(...); await getNewToken(); }`. – deceze Jun 10 '21 at 06:59
  • @deceze Oh ok I get it now. This will definitely work. Thanks a lot. – The_Night_Wolf Jun 10 '21 at 07:06

0 Answers0