0

I have a scenario where a file is uploaded in the web application and is sent to a back end server to upload in storage. Till a response is received from the server a loading spinner is shown. In case the server is down after receiving the request, no response is received by the client and the web page still shows that the file upload is still in progress. Is there a way to check if the server is not responding and then show an error message to the user ?

export const upload = async (file) => {
  let result = null;
  try {
     
    const formData = new FormData();
    formData.append("file", file, file.name);
     
    result = await API.post(
      "/fileupload",
      formData,
      {}
    );
     

    if (result.status === 200) {
      return result.data;
    } else {
      return "Upload file failed.";
    }
  } catch (ex) {
    console.log("parsing failed", ex);
    
  }
};
Sirisha N
  • 31
  • 2
  • 1
    I'd expect `API.post` to eventually fail, network requests usually have a timeout, including an inactivity timeout. What is `API.post`? – T.J. Crowder Oct 05 '21 at 09:25
  • 2
    You'll probably get people telling you to use `Promise.race`, but it would be bandaid at best and unreliable (a slow-but-progressing upload could last beyond whatever artificial timeout you impose with `Promise.race`) – T.J. Crowder Oct 05 '21 at 09:27
  • Does this answer your question? [Fetch API request timeout?](https://stackoverflow.com/questions/46946380/fetch-api-request-timeout) – coagmano Oct 05 '21 at 10:04

1 Answers1

0

You can do this with a timeout. Ideally the library you're using allows you to set a timeout, but if not you can manually create a timeout using Promise.race

function timeout(ms) {
 return new Promise(reject => setTimeout(() => reject(new Error('timeout'), ms));
}
export const upload = async (file) => {
  let result = null;
  try {
     
    const formData = new FormData();
    formData.append("file", file, file.name);
     
    result = await Promise.race([
      timeout(30000), // 30 seconds
      API.post(
        "/fileupload",
        formData,
        {}
      ),
    ]);
     

    if (result.status === 200) {
      return result.data;
    } else {
      return "Upload file failed.";
    }
  } catch (ex) {
    if (ex.message === 'timeout') {
      // timeout handling
    }
    console.log("parsing failed", ex);
    
  }
};

Note that this can be pretty fragile and ideally you would use a library to handle uploads.

Ideally the timeout handling should be added at the API.post module level

coagmano
  • 5,542
  • 1
  • 28
  • 41