What is a good approach to handle editing product images?

Question

You have the following situation:

1. You have an SQL database containing two tables product and product_images
2. You would like the user to be able to add, remove, or move around existing images
3. They can perform those actions from a form which downloads the current state of the product and displays each picture in order.
4. When a user select a new picture and uploads it, the frontend 1) sends the picture to backend at /upload-picture, 2) backend saves it to S3 and responds with the location of the picture, 4) when user clicks submit the picture URLs are included in the edit product request

What is the usual or good approach to perform the changes?

I thought of the followings ways:

Solution 1: delete then recreate

1. Frontend sends an array containing both existing and new URLs, something like this:

   {
       "pictures": ['old1', 'old2', 'new1', 'old3', 'new2']
   }
   

2. Backend deletes all product_images rows of the product and recreates from that pictures array.

Solution 2: compare old and new array, send a diff

1. Frontend sends an array containing a diff of the form (added, removed, same). For example:

   {
       "pictures": {
       "added": [{"url": "new1", "index": 2}, {"url": "new2", "index": 1}],
       "removed": [{"url": "old1", "oldIndex": 1}],
       "same": [{"url": "old2", "oldIndex": 2, "newIndex": 0}],
       }
   }
   

It seems like the first solution is easier to implement. What do you think?

Answer 1

Keep it RESTy. Have the client indicate the desired state, and let the server figure out how to achieve that state. So I would suggest that you stick with approach #1, which would be the desired array of image IDs.

You suggest that this is implemented by first deleting all rows in the database and then re-adding the desired state. This probably works, but the backend can likely compare the current and new state to find a more efficient update strategy (if this is has a relevant performance impact in the context of this application). In particular, the backend can calculate the representation in solution #2 by itself.

Since solution #2 involves a more complex data model, it is easier to arrive at an invalid state – and note that input from clients must not be trusted. For example, a client might specify have an index collision, or might silently drop old images without adding them as "removed".

"pictures": {
  "added": [{"url": "new1", "index": 0}],
  "same": [{"url": "old1", "oldIndex": 1, "newIndex": 0}]
}

Properly validating this would likely require assembling an array as in solution #1. This alone is a strong indication that the data model in solution #1 should be preferred, but as discussed this has no impact on how the server actually performs the update.