1

Ok, here is the situation. I have a website where a user can create a news feed story. That story sends off a request to a service that takes a picture and saves it to S3. Before the picture is saved to S3, the user sees their news feed story get created with a broken image link.

Is it possible to know when that image is saved to S3, then just update the UI to show the now present image without having the user refresh the page, or without constantly sending requests to check if the image is available?

Arel
  • 3,888
  • 6
  • 37
  • 91
  • 1
    i would suggest doing it the other way round , use something like [fileReader](https://stackoverflow.com/questions/16500848/how-to-generate-a-thumbnail-image-after-adding-an-image-inside-an-input-type-fi) to show the picture in the news feed story and then send a request to actually save the picture to S3. – Taki May 05 '18 at 18:21
  • The problem is the picture takes a minute to generate, so either way, I need to update the UI because after it's presented to the user. – Arel May 05 '18 at 18:32
  • There are some fundamental obstacles to overcome, here, since there is no way for a request to S3 to wait for creation of an object and, in fact, asking S3 for an object before the object is created can actually delay the availability of that object, by triggering a transient internal state in S3 that causes S3 to conclude that since it already verified that the object doesn't exist, it may continue to return 404 or 403 for a brief time after the object is created. Can you be more specific about how much time typically elapses until the object becomes available, and the reason for the delay? – Michael - sqlbot May 05 '18 at 21:38
  • @Michael-sqlbot The service is taking a screenshot of a WebGL map created by Cesium.js that can take a while to fully load. It could be up to 30 seconds before the screenshot is recorded and saved. From the first answer, and from further thought, I think I'll need to wait for a response from S3, then send a notification to my main service to then fetch the image. – Arel May 06 '18 at 03:02

1 Answers1

1

Yes you have a lot of ways to do that, you can use Promises to archive that, Promises let you run assyncronous code. At the time you ask the server for the image you still don't have it to display it, you need some time, you can do something like this (i don't know what you are using to reach the server but i give you a example with axios:

since axios returns a promise by defa

function reachServer() {
  return axios.get('url');
}

function loadImage() {
  Promise.resolve(reachServer())
    .then((image) => {
      //got the image
      myImage = image;
    })
    .catch(() => {
     // a error ocurred loading
    })
}

this is a simple case on how to archive that, you have many others, you can use image.onload, or async/await with ES6, i think Promises and async/await are the best options.

Hope it helps

af costa
  • 296
  • 4
  • 13
  • So using an approach like this, what happens when I do the get, and it returns a 404 because the picture isn't there yet? Do I need to keep trying? – Arel May 05 '18 at 18:34
  • i don't know a lot about S3, but with promise you can know when the image is saved or not, the server should send you a response, when the response is successful (meaning the image is saved on server side) you can fetch it, no need to do multiple get requests – af costa May 05 '18 at 18:37
  • Ohh. I see what you're saying. So wait for response from S3, then send a message, then update the UI. Ok. I'm going to go try some stuff and come back. – Arel May 05 '18 at 18:40
  • yes, the only way you know the image reached the server is getting the response success from the server, after that the image should load assyncronous as i showed. any daubt ask for it :) – af costa May 05 '18 at 18:42