Panel: broken image in page view after replacing the image in the file view

fvsch commented 1 year ago

Description

When a page blueprint has an files field with a single image, and in Panel you click through to that file's view and replace the file, then go back to the page view: that image appears broken in the page view.

Screenshots

Expected behavior
When going back to the page edit view, the replace image should appear in the image field.

To reproduce

Create a new plainkit project with composer create-project getkirby/plainkit
Start a development server with composer start
Create a site/blueprints/pages/test.yml blueprint with:

title: Test page
fields:
  my_image:
    label: Image
    type: files
    layout: cards

In the Panel, create a new page with the type “Test page”
Upload an image. I used an image called image1.png for testing.
Click on the image card to end up on the image editing view (at http://localhost:8000/panel/pages/test/files/image1.png in my test).
Use the “Replace file” feature to replace the image with a new upload. I used a second file named image2.png in my test.
Go back to the page that contains the image.

It looks like the generated images used to display the image don't exist anymore (after the file was replaced). The HTML for the image preview looks like this:

<img
  alt=""
  src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw"
  srcset="
    http://localhost:8000/media/pages/test/b969fe6ce9-1678879041/image1-352x.png 352w,
    http://localhost:8000/media/pages/test/b969fe6ce9-1678879041/image1-864x.png 864w,
    http://localhost:8000/media/pages/test/b969fe6ce9-1678879041/image1-1408x.png 1408w
  "
  sizes="(min-width: 30em) and (max-width: 65em) 59em, (min-width: 65em) 88em, 27em"
/>

Those URLs in the srcset attribute are all 404s after step 7 (replacing the image).

Your setup

Kirby Version
3.9.2

Console output

GET http://localhost:8000/media/pages/test/b969fe6ce9-1678879041/image1-1408x.png 404 (Not Found)

Your system (please complete the following information)

Device: Mac Air M1
OS: macOS 13.2.1
PHP: 8.2.3 (via Homebrew)
Browser: Chrome (stable)

afbora commented 1 year ago

Summary

This is caused by changing the file without saving the page. Because unsaved changes still holds the old file media paths.

Unsaved changes after first upload

Media directory is /media/pages/test/cf8d1dead3-1678881816

{
  "api": "/pages/test",
  "originals": {
    "text": "",
    "my_image": [

    ],
    "uuid": "pjZ8Nz3qANH3kXI2"
  },
  "changes": {
    "my_image": [
      {
        "id": "test-1.jpg",
        "image": {
          "back": "pattern",
          "color": "orange-400",
          "cover": false,
          "icon": "image",
          "ratio": "3/2",
          "url": "http://localhost/test/kirby/starterkit-3.9.2/media/pages/test/cf8d1dead3-1678881816/test-1.jpg",
          "src": "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw",
          "srcset": "http://localhost/test/kirby/starterkit-3.9.2/media/pages/test/cf8d1dead3-1678881816/test-1-352x.jpg 352w, http://localhost/test/kirby/starterkit-3.9.2/media/pages/test/cf8d1dead3-1678881816/test-1-864x.jpg 864w, http://localhost/test/kirby/starterkit-3.9.2/media/pages/test/cf8d1dead3-1678881816/test-1-1408x.jpg 1408w"
        },
        "info": "",
        "link": "/pages/test/files/test-1.jpg",
        "sortable": true,
        "text": "test-1.jpg",
        "uuid": "file://qi1lns0WNO8avYmO",
        "dragText": "(image: test-1.jpg)",
        "filename": "test-1.jpg",
        "type": "image",
        "url": "http://localhost/test/kirby/starterkit-3.9.2/media/pages/test/cf8d1dead3-1678881816/test-1.jpg"
      }
    ]
  }
}

After replace file without saving page

Media directory is /media/pages/test/cf8d1dead3-1678881908

afbora commented 1 year ago

@distantnative @bastianallgeier Is it possible to update the new path of a file replaced from FileView by finding the file at the under of any page in unsaved changes? It seems a bit difficult to me 🤷‍♂️ If you have a suggestion for a solution, I would like to try.

distantnative commented 1 year ago

This is super tricky with the unsaved changes in localStorage. Not sure if there'd be a stable fix. I'd assume this would be resolved with keeping unsaved/unpublished changes on the backend.

getkirby / kirby