[Bug] Duplication of images in GraphQL

[josias-hosang]

Ahoi!

I noticed the following issue:

After uploading images in backend, GraphQL returns copies of the same image (see identical file.id). I could reconstruct the behaviour:

1. Upload images one by one with saving between and the images already uploaded were copied; so after 3 images uploaded, GraphQL returns 6 entries.
2. Upload multiple images at once and edit with the built-in editor. After saving, other images were copied.

I testet on several products e.g: https://test-skipp.swell.store/admin/products/649aed7c3866e40012d1fa63

Example return from GraphQL:

"images": [
    {
      "file": {
        "id": "64afa6b6903d0300112aadf4",
        "date_uploaded": "2023-07-13T07:24:38.419Z",
        "length": 793712,
        "md5": "b1c33424239ccd112f47f9d772fc0239",
        "filename": null,
        "content_type": "image/jpeg",
        "url": "https://cdn.swell.store/test-skipp/64afa6b6903d0300112aadf4/b1c33424239ccd112f47f9d772fc0239",
        "width": 1024,
        "height": 768
      },
      "id": "64afa65774c928001233510e"
    },
    {
      "file": {
        "id": "64afa666a8ef890012cbeeb8",
        "date_uploaded": "2023-07-13T07:23:18.601Z",
        "length": 784180,
        "md5": "4b15016d0b76e409969ed7882362cba2",
        "filename": null,
        "content_type": "image/jpeg",
        "url": "https://cdn.swell.store/test-skipp/64afa666a8ef890012cbeeb8/4b15016d0b76e409969ed7882362cba2",
        "width": 2560,
        "height": 1600
      },
      "id": "64afa669ceb8b40012e413ac"
    },
    {
      "file": {
        "id": "64afa655b000790012d0b5f4",
        "date_uploaded": "2023-07-13T07:23:01.247Z",
        "length": 748368,
        "md5": "e9ff020f2cf421dbebda215e1a678339",
        "filename": null,
        "content_type": "image/jpeg",
        "url": "https://cdn.swell.store/test-skipp/64afa655b000790012d0b5f4/e9ff020f2cf421dbebda215e1a678339",
        "width": 1024,
        "height": 768
      },
      "id": "64afa65774c928001233510e"
    },
    {
      "file": {
        "id": "64afa655b000790012d0b5f4",
        "date_uploaded": "2023-07-13T07:23:01.247Z",
        "length": 748368,
        "md5": "e9ff020f2cf421dbebda215e1a678339",
        "filename": null,
        "content_type": "image/jpeg",
        "url": "https://cdn.swell.store/test-skipp/64afa655b000790012d0b5f4/e9ff020f2cf421dbebda215e1a678339",
        "width": 1024,
        "height": 768
      },
      "id": "64afa65774c928001233510e"
    },
    {
      "file": {
        "id": "64afa655b000790012d0b5f4",
        "date_uploaded": "2023-07-13T07:23:01.247Z",
        "length": 748368,
        "md5": "e9ff020f2cf421dbebda215e1a678339",
        "filename": null,
        "content_type": "image/jpeg",
        "url": "https://cdn.swell.store/test-skipp/64afa655b000790012d0b5f4/e9ff020f2cf421dbebda215e1a678339",
        "width": 1024,
        "height": 768
      },
      "id": "64afa669ceb8b40012e413ac"
    },
    {
      "file": {
        "id": "64afa666a8ef890012cbeeb8",
        "date_uploaded": "2023-07-13T07:23:18.601Z",
        "length": 784180,
        "md5": "4b15016d0b76e409969ed7882362cba2",
        "filename": null,
        "content_type": "image/jpeg",
        "url": "https://cdn.swell.store/test-skipp/64afa666a8ef890012cbeeb8/4b15016d0b76e409969ed7882362cba2",
        "width": 2560,
        "height": 1600
      },
      "id": "64afa65774c928001233510e"
    }
  ],

[Strongeyed]

Same issue here and resulting on duplicate images showing in the frontend of my store.

[logeshswell]

@josias-hosang cc: @Strongeyed I can confirm that it is a bug with the admin dashboard but NOT in frontend APIs (graphql/swell-js).

The issue is, the client makes the PUT request with the duplicate file details of the uploaded image (for some scenario that is yet to be identified) as follows:

PUT /products/product_id

{
  "$set": {
    "images": [
      {
        "file": {
          "id": "file-id-1",
          "md5": "md5-1",
          "url": "url-1"
        },
        "id": "id-1"
      },
      {
        "file": {
          "id": "file-id-2",
          "md5": "md5-2",
          "url": "url-2"
        },
        "id": "id-2"
      },
      {
        "file": {
          "id": "file-id-2",
          "md5": "md5-2",
          "url": "url-2"
        },
        "id": "id-2" // duplicate
      }
    ]
  }
}

Hence, the backend also stores the same as duplicates though the image is uploaded to the server only once.

But, in the admin dashboard, unique images are rendered by filtering product.images.id which returns ["id-1", "id-2"]. So, you don't see duplicate images, but the backend API also returns the same response as duplicates in this case.

To fix this issue for the time being, it is recommended to remove the duplicates by following the below URL:
https://store_id.swell.store/admin/console?delete/products/-product~Sid~Himages~Hid~F2

[logeshswell]

@josias-hosang I followed your instructions to reproduce this bug, but I couldn't. Can you provide a screen recording of how to reproduce this issue?
Then, I can file a bug ticket to fix this issue at the earliest.

[josias-hosang]

Ahoi, @logeshswell I'm not sure: you stated that you can confirm the bug but in the answer above you asked for more information... I also can confirm the bug only in dashboard and backend API (developer console). You still need the screen recording?

[logeshswell]

@josias-hosang Yes, I can confirm it as a bug by seeing your product data. But, I find it very hard to reproduce the bug in my test store.
Can you help me with a screen recording of how did you reproduce this bug? So that, I can also try the same and deploy a fix for it.
Thanks!

[josias-hosang]

Ahoi, @logeshswell attached I leave to you a screen recording reproducing the 2 ways i mentioned above. I tested these on a freshly created account and store. Hope these help you.

add-single-images.mp4

edit-images.mp4

[logeshswell]

Thanks @josias-hosang, this should really help to make a fix. I will keep you posted once it is deployed.