Allow for deleting image_upload images in media panel (#23086)

src/components/media-player/dialog-media-manage.ts

@@ -13,7 +13,10 @@ import { MediaClassBrowserSettings } from "../../data/media-player";
 import {
   browseLocalMediaPlayer,
   removeLocalMedia,
+  isLocalMediaSourceContentId,
+  isImageUploadMediaSourceContentId,
 } from "../../data/media_source";
+import { deleteImage, getIdFromUrl } from "../../data/image_upload";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
@@ -270,7 +273,14 @@ class DialogMediaManage extends LitElement {
     try {
       await Promise.all(
         toDelete.map(async (item) => {
-          await removeLocalMedia(this.hass, item.media_content_id);
+          if (isLocalMediaSourceContentId(item.media_content_id)) {
+            await removeLocalMedia(this.hass, item.media_content_id);
+          } else if (isImageUploadMediaSourceContentId(item.media_content_id)) {
+            const media_id = getIdFromUrl(item.media_content_id);
+            if (media_id) {
+              await deleteImage(this.hass, media_id);
+            }
+          }
           this._currentItem = {
             ...this._currentItem!,
             children: this._currentItem!.children!.filter((i) => i !== item),

src/components/media-player/ha-media-manage-button.ts

@@ -4,7 +4,10 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { MediaPlayerItem } from "../../data/media-player";
-import { isLocalMediaSourceContentId } from "../../data/media_source";
+import {
+  isLocalMediaSourceContentId,
+  isImageUploadMediaSourceContentId,
+} from "../../data/media_source";
 import type { HomeAssistant } from "../../types";
 import "../ha-svg-icon";
 import { showMediaManageDialog } from "./show-media-manage-dialog";
@@ -26,7 +29,11 @@ class MediaManageButton extends LitElement {
   protected render() {
     if (
       !this.currentItem ||
-      !isLocalMediaSourceContentId(this.currentItem.media_content_id || "")
+      !(
+        isLocalMediaSourceContentId(this.currentItem.media_content_id || "") ||
+        (this.hass!.user?.is_admin &&
+          isImageUploadMediaSourceContentId(this.currentItem.media_content_id))
+      )
     ) {
       return nothing;
     }

src/data/image_upload.ts

@@ -9,6 +9,7 @@ interface Image {
 }
 
 export const URL_PREFIX = "/api/image/serve/";
+export const MEDIA_PREFIX = "media-source://image_upload/";
 
 export interface ImageMutableParams {
   name: string;
@@ -22,6 +23,8 @@ export const getIdFromUrl = (url: string): string | undefined => {
     if (idx >= 0) {
       id = id.substring(0, idx);
     }
+  } else if (url.startsWith(MEDIA_PREFIX)) {
+    id = url.substring(MEDIA_PREFIX.length);
   }
   return id;
 };

src/data/media_source.ts

@@ -27,6 +27,9 @@ export const browseLocalMediaPlayer = (
 export const isLocalMediaSourceContentId = (mediaId: string) =>
   mediaId.startsWith("media-source://media_source");
 
+export const isImageUploadMediaSourceContentId = (mediaId: string) =>
+  mediaId.startsWith("media-source://image_upload");
+
 export const uploadLocalMedia = async (
   hass: HomeAssistant,
   media_content_id: string,