0

Consider a social network in which the users upload their images (cover, profile etc). Each image need to have different sizes (ex: large, small, supersmall etc).

The upload is done by a API REST json request which contains the file content and some metadata.

The json response is the different urls for each size and the web app immediately uses these.

Goal:

I want to have fast response (not to process the image and create all the sizes then to return the urls in the API response).

Problem: The web app shows immediately the photos after the api response by using the urls returned, so right now I need to return valid urls that contain/return images.

PS: I can make changes both in the backend and the client web application, so your suggested solutions should not be limited only to backend changes.

  • If you have a predefined set of images (cover, profile) and sizes (large, small) why can't you also use predefined URLs (e.g. /users/johndoe/profile_image/small.png)? – Mael Apr 5 '18 at 11:23
  • Great suggestion, but sometimes I store images on AWS S3 and the links are not in my domain. Also even if I can return urls like you are suggestion, the problem will still be if I return the url and the web app will open it and no image will be there. Right ? Correct me if I got it wrong – Kristi Jorgji Apr 5 '18 at 14:00
  • Use a reverse proxy for hidng the fact that your images are scatered all over the "cloud". In any case, the client still have the image. Doesn't It? Why don't you show a preview on the client side during the uploading? Just replace the Uri at the end of the process – Laiv Apr 6 '18 at 17:44
3

Each resource has a URI, which is needed to identify the resource. This is independent from the fact, whether a resource is actually there.

What does that mean for your problem?

Depending on your schema, you could predict, where the image is going to be found, say user/1234567890/images/...

where ... is dependend on how you want to refer to the images,

e.g. 945c6cc6-a062-468f-b436-9946019a3dfd.jpg. If the user uploads 4 images, you could reserve (generate) just 4 UUIDs in your DB, which are later connected to the actual images. And if a user queries the URI, the answer HTTP-102 indicates, that this is a valid resource, but the process (in this case the upload) isn't finished yet.

Your frontend could poll the returned URIs in a decent intervall until the images are available.

  • This is a great answer, but I think that can only work if the returned urls are part of my domain. Right now I return urls that refer to amazon s3 bucket or different cdns because I do not want to transfer an image twice: once from s3 to backend, then backend api to requesting client. Correct me if I got it wrong – Kristi Jorgji Apr 6 '18 at 22:32
  • Your DB would serve as a lookup for the actual ressource. With a smart caching strategy the user wouldn't notice the hop. – Thomas Junk Apr 6 '18 at 23:45
1

I want to have fast response (not to process the image (...) then to return the urls in the API response).

Problem: The web app shows immediately the photos after the api response by using the urls returned, so right now I need to return valid urls that contain/return images.

You say you want to return immediately after uploading an image (without waiting for it to be processed), but need the URL to return some valid data. Well, there's nothing you can do to have your data before it is there (how can you display something that does not exist?).

What you can do, though, is to return some kind of a placeholder value and display it instead of the final, desired data. Then, when the data is ready, fetch it and replace the placeholder. Using placeholders is just one way to deal with your problem.

Another would be to delay returning the URL until you have created the first processed image (e.g. the smallest one), and return an URL to display that to give the user something while you do the heavy processing in the background.

Web applications are inherently asynchronous, and you must somehow deal with it.

  • Thanks for the idea. In my case returning a placeholder may not wrong as it may be cached by the browser (caching headers are set like 1 year because images do not change after being uploaded). I will look into your suggestion though, thanks – Kristi Jorgji Apr 6 '18 at 22:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.