diff --git a/apps/webuiapps/src/components/ChatPanel/CharacterPanel.tsx b/apps/webuiapps/src/components/ChatPanel/CharacterPanel.tsx
index 2f59773..8abc015 100644
--- a/apps/webuiapps/src/components/ChatPanel/CharacterPanel.tsx
+++ b/apps/webuiapps/src/components/ChatPanel/CharacterPanel.tsx
@@ -7,24 +7,15 @@ import {
   generateCharacterId,
   getCharacterList,
 } from '@/lib/characterManager';
-import { deleteCharacterAsset, isVideoAssetUrl } from '@/lib/characterAssetUpload';
+import {
+  deleteCharacterAsset,
+  isLocalCharacterAssetPath,
+  isVideoAssetUrl,
+} from '@/lib/characterAssetUpload';
 import { useResolvedAssetUrl } from '@/hooks/useResolvedAssetUrl';
 import ImageUploader from './ImageUploader';
 import styles from './panel.module.scss';
 
-async function deleteReplacedCharacterAsset(
-  previousUrl: string | undefined,
-  nextUrl: string,
-): Promise<void> {
-  if (!previousUrl || previousUrl === nextUrl) return;
-
-  try {
-    await deleteCharacterAsset(previousUrl);
-  } catch (error) {
-    console.warn('Failed to delete replaced character asset', error);
-  }
-}
-
 const CharacterAvatarThumb: React.FC<{ url?: string; name: string }> = ({ url, name }) => {
   const resolvedUrl = useResolvedAssetUrl(url);
   if (!resolvedUrl) return <span>{name.charAt(0)}</span>;
@@ -53,9 +44,66 @@ interface CharacterPanelProps {
   onClose: () => void;
 }
 
+interface CharacterAssetLifecycle {
+  createdAssets: string[];
+  deleteOnCommit: string[];
+}
+
+function collectCharacterLocalAssetPaths(character?: CharacterConfig): Set<string> {
+  const paths = new Set<string>();
+  const addPath = (path?: string) => {
+    const trimmed = path?.trim();
+    if (trimmed && isLocalCharacterAssetPath(trimmed)) paths.add(trimmed);
+  };
+
+  addPath(character?.character_meta_info?.base_image_url);
+  for (const path of Object.values(character?.character_meta_info?.emotion_images ?? {})) {
+    addPath(path);
+  }
+  for (const pathsForEmotion of Object.values(
+    character?.character_meta_info?.emotion_videos ?? {},
+  )) {
+    for (const path of pathsForEmotion ?? []) addPath(path);
+  }
+
+  return paths;
+}
+
+function collectCollectionLocalAssetPaths(collection: CharacterCollection): Set<string> {
+  const paths = new Set<string>();
+  for (const character of Object.values(collection.items)) {
+    for (const path of collectCharacterLocalAssetPaths(character)) paths.add(path);
+  }
+  return paths;
+}
+
+function diffLocalAssetPaths(
+  oldCharacter: CharacterConfig,
+  newCharacter: CharacterConfig,
+): string[] {
+  const oldPaths = collectCharacterLocalAssetPaths(oldCharacter);
+  const newPaths = collectCharacterLocalAssetPaths(newCharacter);
+  return [...oldPaths].filter((path) => !newPaths.has(path));
+}
+
+async function deleteAssetPaths(paths: Iterable<string>): Promise<void> {
+  const uniquePaths = [...new Set(paths)];
+  await Promise.all(
+    uniquePaths.map(async (path) => {
+      try {
+        await deleteCharacterAsset(path);
+      } catch (err) {
+        console.warn('Failed to delete character asset:', err);
+      }
+    }),
+  );
+}
+
 const CharacterPanel: React.FC<CharacterPanelProps> = ({ collection, onSave, onClose }) => {
   const [col, setCol] = useState<CharacterCollection>(() => ({ ...collection }));
   const [editingId, setEditingId] = useState<string | null>(null);
+  const [sessionCreatedAssets, setSessionCreatedAssets] = useState<Set<string>>(() => new Set());
+  const [pendingDeleteAssets, setPendingDeleteAssets] = useState<Set<string>>(() => new Set());
 
   const characters = getCharacterList(col);
   const activeId = col.activeId;
@@ -67,10 +115,18 @@ const CharacterPanel: React.FC<CharacterPanelProps> = ({ collection, onSave, onC
 
   const handleDelete = (id: string) => {
     if (characters.length <= 1) return;
+    const deletedCharacter = col.items[id];
     const items = { ...col.items };
     delete items[id];
     const newActiveId = col.activeId === id ? Object.keys(items)[0] : col.activeId;
     setCol({ activeId: newActiveId, items });
+    if (deletedCharacter) {
+      setPendingDeleteAssets((current) => {
+        const next = new Set(current);
+        for (const path of collectCharacterLocalAssetPaths(deletedCharacter)) next.add(path);
+        return next;
+      });
+    }
     if (editingId === id) setEditingId(null);
   };
 
@@ -90,14 +146,34 @@ const CharacterPanel: React.FC<CharacterPanelProps> = ({ collection, onSave, onC
 
   const handleSave = () => {
     onSave(col);
+    const referencedPaths = collectCollectionLocalAssetPaths(col);
+    const stagedDeletes = new Set<string>();
+    for (const path of pendingDeleteAssets) {
+      if (!referencedPaths.has(path)) stagedDeletes.add(path);
+    }
+    for (const path of sessionCreatedAssets) {
+      if (!referencedPaths.has(path)) stagedDeletes.add(path);
+    }
+    void deleteAssetPaths(stagedDeletes);
+  };
+
+  const handleCancel = () => {
+    const originallyReferencedPaths = collectCollectionLocalAssetPaths(collection);
+    const createdOnlyInSession = [...sessionCreatedAssets].filter(
+      (path) => !originallyReferencedPaths.has(path),
+    );
+    void deleteAssetPaths(createdOnlyInSession);
+    onClose();
   };
 
   if (editing) {
     return (
       <CharacterEditor
         character={editing}
-        onSave={(updated) => {
+        onSave={(updated, lifecycle) => {
           setCol({ ...col, items: { ...col.items, [updated.id]: updated } });
+          setSessionCreatedAssets((current) => new Set([...current, ...lifecycle.createdAssets]));
+          setPendingDeleteAssets((current) => new Set([...current, ...lifecycle.deleteOnCommit]));
           setEditingId(null);
         }}
         onClose={() => setEditingId(null)}
@@ -106,11 +182,11 @@ const CharacterPanel: React.FC<CharacterPanelProps> = ({ collection, onSave, onC
   }
 
   return (
-    <div className={styles.overlay} onClick={onClose}>
+    <div className={styles.overlay} onClick={handleCancel}>
       <div className={styles.panel} onClick={(e) => e.stopPropagation()}>
         <div className={styles.panelHeader}>
           <span className={styles.panelTitle}>Characters</span>
-          <button className={styles.closeBtn} onClick={onClose}>
+          <button className={styles.closeBtn} onClick={handleCancel}>
             <X size={18} />
           </button>
         </div>
@@ -174,7 +250,7 @@ const CharacterPanel: React.FC<CharacterPanelProps> = ({ collection, onSave, onC
             <Plus size={14} /> New Character
           </button>
           <div style={{ flex: 1 }} />
-          <button className={styles.cancelBtn} onClick={onClose}>
+          <button className={styles.cancelBtn} onClick={handleCancel}>
             Cancel
           </button>
           <button className={styles.saveBtn} onClick={handleSave}>
@@ -192,7 +268,7 @@ const CharacterPanel: React.FC<CharacterPanelProps> = ({ collection, onSave, onC
 
 const CharacterEditor: React.FC<{
   character: CharacterConfig;
-  onSave: (config: CharacterConfig) => void;
+  onSave: (config: CharacterConfig, lifecycle: CharacterAssetLifecycle) => void;
   onClose: () => void;
 }> = ({ character, onSave, onClose }) => {
   const [activeTab, setActiveTab] = useState<'details' | 'assets'>('details');
@@ -208,6 +284,25 @@ const CharacterEditor: React.FC<{
     ...character.character_meta_info?.emotion_videos,
   }));
   const [newEmotion, setNewEmotion] = useState('');
+  const [createdAssets, setCreatedAssets] = useState<Set<string>>(() => new Set());
+  const [deleteOnCommit, setDeleteOnCommit] = useState<Set<string>>(() => new Set());
+
+  const markUploadedAsset = (url: string) => {
+    if (!isLocalCharacterAssetPath(url)) return;
+    setCreatedAssets((current) => {
+      if (current.has(url)) return current;
+      return new Set(current).add(url);
+    });
+  };
+
+  const markRemovedAsset = (url?: string) => {
+    const trimmedUrl = url?.trim();
+    if (!trimmedUrl || !isLocalCharacterAssetPath(trimmedUrl)) return;
+    setDeleteOnCommit((current) => {
+      if (current.has(trimmedUrl)) return current;
+      return new Set(current).add(trimmedUrl);
+    });
+  };
 
   const handleAddEmotion = () => {
     const e = newEmotion.trim().toLowerCase();
@@ -221,7 +316,9 @@ const CharacterEditor: React.FC<{
     emotionVideos[emotion]?.[0] || emotionImages[emotion];
 
   const handleEmotionAssetUpload = (emotion: string, url: string, type: 'image' | 'video') => {
-    void deleteReplacedCharacterAsset(getEmotionAssetUrl(emotion), url);
+    const previousUrl = getEmotionAssetUrl(emotion);
+    if (previousUrl !== url) markRemovedAsset(previousUrl);
+    markUploadedAsset(url);
 
     if (type === 'video') {
       setEmotionVideos({ ...emotionVideos, [emotion]: [url] });
@@ -237,8 +334,8 @@ const CharacterEditor: React.FC<{
     setEmotionVideos(updatedVideos);
   };
 
-  const handleEmotionAssetRemove = async (emotion: string) => {
-    await deleteCharacterAsset(getEmotionAssetUrl(emotion));
+  const handleEmotionAssetRemove = (emotion: string) => {
+    markRemovedAsset(getEmotionAssetUrl(emotion));
     const updatedImages = { ...emotionImages };
     delete updatedImages[emotion];
     setEmotionImages(updatedImages);
@@ -248,7 +345,7 @@ const CharacterEditor: React.FC<{
   };
 
   const handleRemoveEmotion = (emotion: string) => {
-    void deleteCharacterAsset(getEmotionAssetUrl(emotion));
+    markRemovedAsset(getEmotionAssetUrl(emotion));
     setEmotions(emotions.filter((e) => e !== emotion));
     const updatedImages = { ...emotionImages };
     delete updatedImages[emotion];
@@ -278,10 +375,24 @@ const CharacterEditor: React.FC<{
       }
     }
 
+    const previousUrl = getEmotionAssetUrl(emotion);
+    if (previousUrl !== trimmedUrl) markRemovedAsset(previousUrl);
+
     setEmotionImages(updatedImages);
     setEmotionVideos(updatedVideos);
   };
 
+  const handleBaseImageUpload = (url: string) => {
+    if (imageUrl !== url) markRemovedAsset(imageUrl);
+    markUploadedAsset(url);
+    setImageUrl(url);
+  };
+
+  const handleBaseImageRemove = () => {
+    markRemovedAsset(imageUrl);
+    setImageUrl('');
+  };
+
   const handleSave = () => {
     const cleanImages: Record<string, string> = {};
     for (const [k, v] of Object.entries(emotionImages)) {
@@ -293,7 +404,7 @@ const CharacterEditor: React.FC<{
       if (v?.length) cleanVideos[k] = v;
     }
 
-    onSave({
+    const updatedCharacter: CharacterConfig = {
       id: character.id,
       character_name: name.trim() || 'Unnamed',
       character_gender_desc: gender.trim(),
@@ -305,15 +416,30 @@ const CharacterEditor: React.FC<{
         emotion_images: Object.keys(cleanImages).length > 0 ? cleanImages : undefined,
         emotion_videos: Object.keys(cleanVideos).length > 0 ? cleanVideos : undefined,
       },
+    };
+
+    const referencedPaths = collectCharacterLocalAssetPaths(updatedCharacter);
+    const staleAssets = [
+      ...new Set([...deleteOnCommit, ...diffLocalAssetPaths(character, updatedCharacter)]),
+    ].filter((path) => !referencedPaths.has(path));
+
+    onSave(updatedCharacter, {
+      createdAssets: [...createdAssets],
+      deleteOnCommit: staleAssets,
     });
   };
 
+  const handleClose = () => {
+    void deleteAssetPaths(createdAssets);
+    onClose();
+  };
+
   return (
-    <div className={styles.overlay} onClick={onClose}>
+    <div className={styles.overlay} onClick={handleClose}>
       <div className={styles.panel} onClick={(e) => e.stopPropagation()}>
         <div className={styles.panelHeader}>
           <span className={styles.panelTitle}>Edit Character</span>
-          <button className={styles.closeBtn} onClick={onClose}>
+          <button className={styles.closeBtn} onClick={handleClose}>
             <X size={18} />
           </button>
         </div>
@@ -388,15 +514,9 @@ const CharacterEditor: React.FC<{
                     currentUrl={imageUrl}
                     accept="image/*"
                     onUpload={(url, type) => {
-                      if (type === 'image') {
-                        void deleteReplacedCharacterAsset(imageUrl, url);
-                        setImageUrl(url);
-                      }
-                    }}
-                    onRemove={() => {
-                      void deleteCharacterAsset(imageUrl);
-                      setImageUrl('');
+                      if (type === 'image') handleBaseImageUpload(url);
                     }}
+                    onRemove={handleBaseImageRemove}
                   />
                 </div>
               </div>
@@ -460,7 +580,7 @@ const CharacterEditor: React.FC<{
                       emotion={e}
                       currentUrl={getEmotionAssetUrl(e)}
                       onUpload={(url, type) => handleEmotionAssetUpload(e, url, type)}
-                      onRemove={() => void handleEmotionAssetRemove(e)}
+                      onRemove={() => handleEmotionAssetRemove(e)}
                     />
                   ))}
                 </div>
@@ -470,7 +590,7 @@ const CharacterEditor: React.FC<{
         </div>
 
         <div className={styles.panelFooter}>
-          <button className={styles.cancelBtn} onClick={onClose}>
+          <button className={styles.cancelBtn} onClick={handleClose}>
             Back
           </button>
           <button className={styles.saveBtn} onClick={handleSave}>
diff --git a/apps/webuiapps/src/components/ChatPanel/ImageUploader.tsx b/apps/webuiapps/src/components/ChatPanel/ImageUploader.tsx
index 761f028..d6c9a83 100644
--- a/apps/webuiapps/src/components/ChatPanel/ImageUploader.tsx
+++ b/apps/webuiapps/src/components/ChatPanel/ImageUploader.tsx
@@ -3,6 +3,7 @@ import { Upload, X } from 'lucide-react';
 import {
   uploadCharacterAsset,
   getCharacterAssetUrl,
+  deleteCharacterAsset,
   isExternalOrDataUrl,
   isVideoAssetUrl,
 } from '@/lib/characterAssetUpload';
@@ -32,6 +33,13 @@ const ImageUploader: React.FC<ImageUploaderProps> = ({
   const [error, setError] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const expectedUrlRef = useRef<string | undefined>(undefined);
+  const uploadSequenceRef = useRef(0);
+
+  useEffect(() => {
+    return () => {
+      uploadSequenceRef.current += 1;
+    };
+  }, []);
 
   useEffect(() => {
     expectedUrlRef.current = currentUrl;
@@ -61,6 +69,16 @@ const ImageUploader: React.FC<ImageUploaderProps> = ({
   }, [currentUrl]);
 
   const handleFile = async (file: File) => {
+    const uploadSequence = (uploadSequenceRef.current += 1);
+    const isCurrentUpload = () => uploadSequenceRef.current === uploadSequence;
+    const cleanupStaleUpload = async (path: string) => {
+      try {
+        await deleteCharacterAsset(path);
+      } catch (err) {
+        console.warn('Failed to clean up stale uploaded asset:', err);
+      }
+    };
+
     const isVid = file.type.startsWith('video/') || isVideoAssetUrl(file.name);
     setIsVideo(isVid);
     setUploading(true);
@@ -68,34 +86,57 @@ const ImageUploader: React.FC<ImageUploaderProps> = ({
     try {
       const type = isVid ? 'video' : 'image';
       const path = await uploadCharacterAsset(characterId, emotion, file, type);
+      if (!isCurrentUpload()) {
+        await cleanupStaleUpload(path);
+        return;
+      }
+
       if (expectedUrlRef.current === path || !expectedUrlRef.current) {
-        const isVidLocal = isVid;
+const isVidLocal = isVid;
         setIsVideo(isVidLocal);
         if (isExternalOrDataUrl(path)) {
           setPreviewUrl(path);
         } else {
-          const url = await getCharacterAssetUrl(path);
+          let url: string | null | undefined;
+          try {
+            url = await getCharacterAssetUrl(path);
+          } catch {
+            await cleanupStaleUpload(path);
+            throw new Error('Failed to retrieve asset URL');
+          }
+          if (!isCurrentUpload()) {
+            await cleanupStaleUpload(path);
+            return;
+          }
           setPreviewUrl(url ?? null);
         }
       }
+      if (!isCurrentUpload()) {
+        await cleanupStaleUpload(path);
+        return;
+      }
       onUpload(path, type);
     } catch (err) {
+      if (!isCurrentUpload()) return;
       console.warn('Failed to upload asset:', err);
       setError('Upload failed. Check file size/type and try again.');
     } finally {
-      setUploading(false);
+      if (isCurrentUpload()) setUploading(false);
     }
   };
 
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
     setDragover(false);
+    if (uploading) return;
     const file = e.dataTransfer.files?.[0];
     if (file) handleFile(file);
   };
 
   const handleRemove = () => {
+    uploadSequenceRef.current += 1;
     setPreviewUrl(null);
+    setUploading(false);
     setIsVideo(false);
     setError(null);
     if (inputRef.current) inputRef.current.value = '';
@@ -103,7 +144,7 @@ const ImageUploader: React.FC<ImageUploaderProps> = ({
   };
 
   return (
-    <div className={styles.assetSlot}>
+    <div className={styles.assetSlot} aria-busy={uploading}>
       <div className={styles.assetSlotHeader}>
         <span className={styles.emotionTag}>{emotion}</span>
       </div>
@@ -115,7 +156,12 @@ const ImageUploader: React.FC<ImageUploaderProps> = ({
           ) : (
             <img src={previewUrl} alt={emotion} className={styles.assetMedia} />
           )}
-          <button className={styles.assetRemoveBtn} onClick={handleRemove} title="Remove">
+          <button
+            className={styles.assetRemoveBtn}
+            onClick={handleRemove}
+            title="Remove"
+            disabled={uploading}
+          >
             <X size={12} />
           </button>
         </div>
@@ -128,7 +174,10 @@ const ImageUploader: React.FC<ImageUploaderProps> = ({
           }}
           onDragLeave={() => setDragover(false)}
           onDrop={handleDrop}
-          onClick={() => inputRef.current?.click()}
+          aria-busy={uploading}
+          onClick={() => {
+            if (!uploading) inputRef.current?.click();
+          }}
         >
           {uploading ? (
             <span className={styles.assetUploading}>Uploading...</span>
@@ -143,7 +192,9 @@ const ImageUploader: React.FC<ImageUploaderProps> = ({
             type="file"
             accept={accept}
             className={styles.assetHiddenInput}
+            disabled={uploading}
             onChange={(e) => {
+              if (uploading) return;
               const file = e.target.files?.[0];
               if (file) handleFile(file);
             }}
diff --git a/apps/webuiapps/src/lib/__tests__/characterAssetUpload.test.ts b/apps/webuiapps/src/lib/__tests__/characterAssetUpload.test.ts
index ed6a4fd..b74c99d 100644
--- a/apps/webuiapps/src/lib/__tests__/characterAssetUpload.test.ts
+++ b/apps/webuiapps/src/lib/__tests__/characterAssetUpload.test.ts
@@ -118,7 +118,7 @@ describe('characterAssetUpload', () => {
     expect(isVideoAssetUrl('https://cdn.example.com/avatar.png?format=webp')).toBe(false);
   });
 
-  it('detects image asset URLs with query strings and hashes', () => {
+it('detects image asset URLs with query strings and hashes', () => {
     expect(isImageAssetUrl('https://cdn.example.com/avatar.jpg?version=1')).toBe(true);
     expect(isImageAssetUrl('https://cdn.example.com/avatar.png#preview')).toBe(true);
     expect(isImageAssetUrl('https://cdn.example.com/avatar.jpeg?format=webp')).toBe(true);
diff --git a/apps/webuiapps/src/lib/characterAssetUpload.ts b/apps/webuiapps/src/lib/characterAssetUpload.ts
index 9586fb8..6303303 100644
--- a/apps/webuiapps/src/lib/characterAssetUpload.ts
+++ b/apps/webuiapps/src/lib/characterAssetUpload.ts
@@ -7,7 +7,7 @@ import { putBinaryFile, getBinaryFile, deleteFilesByPaths } from './diskStorage'
 
 const CHARACTER_ASSETS_PATH = '/characters';
 export const MAX_CHARACTER_IMAGE_BYTES = 10 * 1024 * 1024;
-export const MAX_CHARACTER_VIDEO_BYTES = 50 * 1024 * 1024;
+export const MAX_CHARACTER_VIDEO_BYTES = 20 * 1024 * 1024;
 
 export const CHARACTER_IMAGE_MIME_TO_EXT = {
   'image/jpeg': 'jpg',
@@ -109,7 +109,6 @@ function createUniqueAssetFilename(safeEmotion: string, ext: string): string {
   } else {
     random = `${Date.now()}-${fallbackUniqueAssetId++}`;
   }
-
   return `${safeEmotion}-${Date.now()}-${random}.${ext}`;
 }