I have REST API call in Frontend that check translation Status, once status is "Succeeded" I'm making anchor tags with donwload links available in frontend. However, I noticed there is some period of time when status is "Succeeded" but translation service has not yet uploaded translated documents to target container.
Testing with 1 small file that period is usually ~5-10 seconds and Im not sure if it changes if more and / or larger files are present.
My issue is that if I make files immediately available after "Succeeded", users who click the links will get the error specified Blob doesnt exists. After clicking and waiting a little it will work.
Eventhough Blobs dont exist yet, I can easily construct the target blob url easily beforehand, knowing file name and language code. Thats why I can display links immediately after "Succeeded".
What is a proper solution to this? Should I make an interval in frontend that will check for blob availability when receiving "Succeeded" status and only after its confirmed display links? Or is there a better way ?
What is a proper solution to this? Should I make an interval in frontend that will check for blob availability when receiving "Succeeded" status and only after its confirmed display links? Or is there a better way?
The issue is caused by a delay in the translation service uploading the translated documents to the target container.
My possible solution is to check for the availability
of the blob before making the download links available to the users.
Azure Blob Storage REST API
.HEAD
request to determine whether the blob is present. You can provide users with download URLs if the blob is valid.You can below code that will repeat this process until the blob becomes available or until a certain timeout period is reached.
Code:
const blobUrl = '<Your-Blob url with sas token>';
const requestOptions = {
method: 'HEAD'
};
function checkBlobAvailability() {
fetch(blobUrl, requestOptions)
.then(response => {
if (response.ok) {
// Blob exists, make download links available to users
console.log(response.statusText)
} else {
// Blob does not exist, wait for a few seconds and check again
setTimeout(checkBlobAvailability, 5000);
}
})
.catch(error => {
console.log(error);
});
}
checkBlobAvailability();
The above code will check availability of blob URL and gives output as OK
with Head request.
Output:
OK
Now, Users will not get an error when clicking the links, and they will only be able to download the translated files when they are available in the target container.