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);
}
};
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