How to return uploaded image urls from REST API without waiting for their processing?

Question

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.

Answer 1

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.

Answer 2

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.