Overwriting file uploads doesn't update URL

[dmvdven]

Link to reproduction

No response

Payload Version

3.0.0-beta.32

Node Version

20.13.1

Next.js Version

14.3.0-canary.37

Describe the Bug

Hi,

I'm adding a profile picture field where users can overwrite their previous profile image by simply uploading a new profile image.

I'm using the code below to update the specific media by ID including the "overwriteExistingFiles". But it seems like the image URL doesn't get updated when overwriting a file.

So the file is actually overwritten (I can confirm this in the back-end, the title and thumbnail has changed correctly), but the overwritten image is not reachable by URL since the URL contains the old file name instead of the new one.

await payload.update({
      collection: "media",
      id: previousFileID,
      data: {
            title: file.name,
      },
      file: file || null,
      overwriteExistingFiles: true,
})

I found out by passing url: "/api/media/file/" + file.name to the "data" object, I can get it to work. But shouldn't the URL be updated automatic when overwriting a file?

      data: {
            title: file.name,
            url: "/api/media/file/" + file.name,
      },

Reproduction Steps

Use the code as shown above.

Adapters and Plugins

No response

[dmvdven]

When overwriting an image with payload.update and using additional image sizes, the additional image sizes also won't update their URL's.

I don't think I can do the same trick as above with url: "/api/media/file/" + file.name since the additional image sizes are generated in the background. So I don't know where I would add this line of code, but maybe I'm overlooking this?

See the example object below. The newly uploaded file is dog-5770580_1920.jpg but the URL stays sheep-1822137_1920.jpg.

{
    "thumbnail": {
        "url": "/api/media/file/sheep-1822137_1920-150x150.jpg",
        "width": 150,
        "height": 150,
        "mimeType": "image/jpeg",
        "filesize": 4363,
        "filename": "dog-5770580_1920-150x150.jpg"
    },
    "medium": {
        "url": "/api/media/file/sheep-1822137_1920-300x199.jpg",
        "width": 300,
        "height": 200,
        "mimeType": "image/jpeg",
        "filesize": 8835,
        "filename": "dog-5770580_1920-300x200.jpg"
    },
    "large": {
        "url": "/api/media/file/sheep-1822137_1920-1024x679.jpg",
        "width": 1024,
        "height": 683,
        "mimeType": "image/jpeg",
        "filesize": 56461,
        "filename": "dog-5770580_1920-1024x683.jpg"
    },
    "full_size": {
        "url": "/api/media/file/sheep-1822137_1920-1920x1274.jpg",
        "width": 1920,
        "height": 1280,
        "mimeType": "image/jpeg",
        "filesize": 156711,
        "filename": "dog-5770580_1920-1920x1280.jpg"
    }
}

[vixalien]

I'm also encountering this issu. What's even more bizzare is that the filename now seems to be independent of url.

For example, If I upload a file named vacation.jpg, the media object will have the following shape:

{
        "url": "/api/media/file/vacation.jpg",
        "width": 1920,
        "height": 1280,
        "mimeType": "image/jpeg",
        "filesize": 156711,
        "filename": "vacation.jpeg"
    }

The filename has a different extension (.jpeg) that url (.jpg). However, the file is uploaded to the server as vacation.jpeg (same as filename) and this causes the url value to be misleading.