diff --git a/apps/builder/app/builder/features/assets/assets.tsx b/apps/builder/app/builder/features/assets/assets.tsx
index 4c6cec0011d0..bdd98edeeab4 100644
--- a/apps/builder/app/builder/features/assets/assets.tsx
+++ b/apps/builder/app/builder/features/assets/assets.tsx
@@ -1,10 +1,14 @@
 import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   IconButton,
   PanelTitle,
   Separator,
   Tooltip,
 } from "@webstudio-is/design-system";
-import { BrushCleaningIcon, NewFolderIcon } from "@webstudio-is/icons";
+import { BrushCleaningIcon, PlusIcon } from "@webstudio-is/icons";
 import { useRef, useState } from "react";
 import { useStore } from "@nanostores/react";
 import { isTextFileAsset } from "@webstudio-is/sdk";
@@ -17,6 +21,7 @@ import { $assets } from "~/shared/sync/data-stores";
 import type { Publish } from "~/shared/pubsub";
 import { useImageAssetCanvasDrag } from "./use-image-asset-canvas-drag";
 import { TextFileEditor } from "~/builder/features/text-file-editor/text-file-editor";
+import { CreateTextFileDialog } from "~/builder/features/text-file-editor/create-text-file-dialog";
 import { getAssetUrl } from "~/builder/shared/assets/asset-utils";
 
 export const AssetsPanel = ({
@@ -27,9 +32,15 @@ export const AssetsPanel = ({
 }) => {
   const [folderId, setFolderId] = useState<string>();
   const [createFolderOpen, setCreateFolderOpen] = useState(false);
+  const [createTextFileOpen, setCreateTextFileOpen] = useState(false);
   const [openedTextAssetId, setOpenedTextAssetId] = useState<string>();
   const uploadRef = useRef<AssetUploadHandle>(null);
   const authPermit = useStore($authPermit);
+  const addActions = {
+    upload: () => uploadRef.current?.open(),
+    createFile: () => setCreateTextFileOpen(true),
+    createFolder: () => setCreateFolderOpen(true),
+  };
   const openAsset = (assetId: string) => {
     const asset = $assets.get().get(assetId);
     if (asset === undefined) {
@@ -48,24 +59,46 @@ export const AssetsPanel = ({
   useImageAssetCanvasDrag(publish);
   return (
     <>
+      <AssetUpload
+        ref={uploadRef}
+        type="file"
+        folderId={folderId}
+        showTrigger={false}
+      />
       <PanelTitle
         suffix={
           <>
-            <Tooltip content="Create folder">
+            <Tooltip content="Delete unused assets">
               <IconButton
-                disabled={authPermit === "view"}
-                aria-label="Create asset folder"
-                onClick={() => setCreateFolderOpen(true)}
+                aria-label="Delete unused assets"
+                onClick={openDeleteUnusedAssetsDialog}
               >
-                <NewFolderIcon />
-              </IconButton>
-            </Tooltip>
-            <Tooltip content="Delete unused assets">
-              <IconButton onClick={openDeleteUnusedAssetsDialog}>
                 <BrushCleaningIcon />
               </IconButton>
             </Tooltip>
-            <AssetUpload ref={uploadRef} type="file" folderId={folderId} />
+            <DropdownMenu>
+              <Tooltip content="Add asset">
+                <DropdownMenuTrigger asChild>
+                  <IconButton
+                    disabled={authPermit === "view"}
+                    aria-label="Add asset"
+                  >
+                    <PlusIcon />
+                  </IconButton>
+                </DropdownMenuTrigger>
+              </Tooltip>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onSelect={addActions.upload}>
+                  Upload
+                </DropdownMenuItem>
+                <DropdownMenuItem onSelect={addActions.createFile}>
+                  Create text file
+                </DropdownMenuItem>
+                <DropdownMenuItem onSelect={addActions.createFolder}>
+                  Create folder
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </>
         }
       >
@@ -78,12 +111,7 @@ export const AssetsPanel = ({
         onOpen={openAsset}
         canManageFolders={authPermit !== "view"}
         panelActions={{
-          ...(authPermit === "view"
-            ? {}
-            : {
-                createFolder: () => setCreateFolderOpen(true),
-                upload: () => uploadRef.current?.open(),
-              }),
+          ...(authPermit === "view" ? {} : addActions),
           deleteUnusedAssets: openDeleteUnusedAssetsDialog,
         }}
       />
@@ -92,6 +120,12 @@ export const AssetsPanel = ({
         onOpenChange={setCreateFolderOpen}
         currentFolderId={folderId}
       />
+      <CreateTextFileDialog
+        open={createTextFileOpen}
+        folderId={folderId}
+        onOpenChange={setCreateTextFileOpen}
+        onCreated={setOpenedTextAssetId}
+      />
       {openedTextAssetId !== undefined && (
         <TextFileEditor
           key={openedTextAssetId}
diff --git a/apps/builder/app/builder/features/text-file-editor/create-text-file-dialog.test.ts b/apps/builder/app/builder/features/text-file-editor/create-text-file-dialog.test.ts
new file mode 100644
index 000000000000..3973de9fda62
--- /dev/null
+++ b/apps/builder/app/builder/features/text-file-editor/create-text-file-dialog.test.ts
@@ -0,0 +1,45 @@
+import { expect, test } from "vitest";
+import type { Asset } from "@webstudio-is/sdk";
+import { getTextFileNameError } from "./create-text-file-dialog";
+
+const existing: Asset = {
+  id: "existing",
+  projectId: "project",
+  name: "readme_hash.md",
+  folderId: "docs",
+  type: "file",
+  format: "md",
+  size: 0,
+  createdAt: "2026-07-20T00:00:00.000Z",
+  meta: {},
+};
+
+test("accepts supported text names and rejects invalid or duplicate names", () => {
+  expect(
+    getTextFileNameError({ name: "data.json", assets: [existing] })
+  ).toBeUndefined();
+  expect(getTextFileNameError({ name: "image.png", assets: [] })).toBe(
+    "Use a supported editable text extension."
+  );
+  expect(getTextFileNameError({ name: ".md", assets: [] })).toBe(
+    "Use a supported editable text extension."
+  );
+  expect(getTextFileNameError({ name: "bad/name.md", assets: [] })).toBe(
+    "Enter a valid file name."
+  );
+  expect(
+    getTextFileNameError({
+      name: "readme.md",
+      assets: [existing],
+    })
+  ).toBe("A file with this name already exists.");
+});
+
+test("compares global complete display names after an asset is renamed", () => {
+  expect(
+    getTextFileNameError({
+      name: "guide.md",
+      assets: [{ ...existing, filename: "guide", folderId: "other" }],
+    })
+  ).toBe("A file with this name already exists.");
+});
diff --git a/apps/builder/app/builder/features/text-file-editor/create-text-file-dialog.tsx b/apps/builder/app/builder/features/text-file-editor/create-text-file-dialog.tsx
new file mode 100644
index 000000000000..a91868ca6ff3
--- /dev/null
+++ b/apps/builder/app/builder/features/text-file-editor/create-text-file-dialog.tsx
@@ -0,0 +1,169 @@
+import { useLayoutEffect, useState, type KeyboardEvent } from "react";
+import isValidFilename from "valid-filename";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Flex,
+  Grid,
+  InputField,
+  Label,
+  Text,
+  theme,
+} from "@webstudio-is/design-system";
+import {
+  formatAssetName,
+  getFileExtension,
+  getMimeTypeByExtension,
+  isTextFileAsset,
+  type Asset,
+} from "@webstudio-is/sdk";
+import { $assets } from "~/shared/sync/data-stores";
+import { uploadSingleAsset } from "~/builder/shared/assets/upload-assets";
+
+export const getTextFileNameError = ({
+  name,
+  assets,
+}: {
+  name: string;
+  assets: Iterable<Asset>;
+}) => {
+  if (isValidFilename(name) === false) {
+    return "Enter a valid file name.";
+  }
+  if (
+    isTextFileAsset({ format: getFileExtension(name)?.toLowerCase() ?? "" }) ===
+    false
+  ) {
+    return "Use a supported editable text extension.";
+  }
+  for (const asset of assets) {
+    if (formatAssetName(asset) === name) {
+      return "A file with this name already exists.";
+    }
+  }
+};
+
+const createTextFile = async ({
+  name,
+  folderId,
+}: {
+  name: string;
+  folderId?: string;
+}): Promise<Asset | undefined> => {
+  const format = getFileExtension(name)?.toLowerCase() ?? "";
+  if (isTextFileAsset({ format }) === false) {
+    return;
+  }
+  const file = new File([""], name, {
+    type: getMimeTypeByExtension(format),
+  });
+  return uploadSingleAsset("file", file, { folderId });
+};
+
+const stopEscapePropagation = (event: KeyboardEvent) => {
+  if (event.key === "Escape") {
+    event.stopPropagation();
+  }
+};
+
+export const CreateTextFileDialog = ({
+  open,
+  folderId,
+  onOpenChange,
+  onCreated,
+}: {
+  open: boolean;
+  folderId?: string;
+  onOpenChange: (open: boolean) => void;
+  onCreated: (assetId: string) => void;
+}) => {
+  const [name, setName] = useState("untitled.md");
+  const [error, setError] = useState<string>();
+  const [creating, setCreating] = useState(false);
+
+  useLayoutEffect(() => {
+    if (open) {
+      setName("untitled.md");
+      setError(undefined);
+      setCreating(false);
+    }
+  }, [open]);
+
+  const normalizedName = name.trim();
+  const submit = async () => {
+    if (creating) {
+      return;
+    }
+    const validationError = getTextFileNameError({
+      name: normalizedName,
+      assets: $assets.get().values(),
+    });
+    setError(validationError);
+    if (validationError !== undefined) {
+      return;
+    }
+    setCreating(true);
+    try {
+      const asset = await createTextFile({ name: normalizedName, folderId });
+      if (asset === undefined) {
+        setError("The file could not be created.");
+        return;
+      }
+      onOpenChange(false);
+      onCreated(asset.id);
+    } catch (error) {
+      setError(
+        error instanceof Error
+          ? error.message
+          : "The file could not be created."
+      );
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        minWidth={360}
+        aria-describedby={undefined}
+        onKeyDown={stopEscapePropagation}
+      >
+        <DialogTitle>New text file</DialogTitle>
+        <Grid gap={3} css={{ padding: theme.panel.padding }}>
+          <Grid gap={1}>
+            <Label htmlFor="asset-text-file-name">File name</Label>
+            <InputField
+              id="asset-text-file-name"
+              autoFocus
+              disabled={creating}
+              value={name}
+              color={error === undefined ? undefined : "error"}
+              onChange={(event) => {
+                setName(event.target.value);
+                setError(undefined);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  void submit();
+                }
+              }}
+            />
+            {error !== undefined && (
+              <Text color="destructive" variant="tiny">
+                {error}
+              </Text>
+            )}
+          </Grid>
+          <Flex justify="end">
+            <Button disabled={creating} onClick={() => void submit()}>
+              {creating ? "Creating…" : "Create file"}
+            </Button>
+          </Flex>
+        </Grid>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/builder/app/builder/shared/asset-manager/asset-manager-item-menu.test.ts b/apps/builder/app/builder/shared/asset-manager/asset-manager-item-menu.test.ts
index 7e99d4509c53..93dfdb0f833f 100644
--- a/apps/builder/app/builder/shared/asset-manager/asset-manager-item-menu.test.ts
+++ b/apps/builder/app/builder/shared/asset-manager/asset-manager-item-menu.test.ts
@@ -7,6 +7,7 @@ test("uses one ordered command model for context and dropdown menus", () => {
     open: action,
     settings: action,
     createFolder: action,
+    createFile: action,
     upload: action,
     cut: action,
     copy: action,
@@ -21,6 +22,7 @@ test("uses one ordered command model for context and dropdown menus", () => {
 
   expect(items.map(({ name }) => name)).toEqual([
     "createFolder",
+    "createFile",
     "upload",
     "open",
     "settings",
@@ -60,6 +62,7 @@ test("orders panel actions independently of unavailable item actions", () => {
   const action = vi.fn();
   const items = getAssetManagerItemMenuItems({
     createFolder: action,
+    createFile: action,
     upload: action,
     paste: action,
     deleteUnusedAssets: action,
@@ -67,6 +70,7 @@ test("orders panel actions independently of unavailable item actions", () => {
 
   expect(items.map(({ name }) => name)).toEqual([
     "createFolder",
+    "createFile",
     "upload",
     "paste",
     "deleteUnusedAssets",
diff --git a/apps/builder/app/builder/shared/asset-manager/asset-manager-item-menu.tsx b/apps/builder/app/builder/shared/asset-manager/asset-manager-item-menu.tsx
index b6ef0127e1b4..8682d73f74c2 100644
--- a/apps/builder/app/builder/shared/asset-manager/asset-manager-item-menu.tsx
+++ b/apps/builder/app/builder/shared/asset-manager/asset-manager-item-menu.tsx
@@ -28,6 +28,7 @@ export type AssetManagerItemActions = Partial<
     | "download"
     | "replace"
     | "createFolder"
+    | "createFile"
     | "upload"
     | "deleteUnusedAssets"
     | "delete",
@@ -46,6 +47,7 @@ type ItemDefinition = {
 
 const itemDefinitions: readonly ItemDefinition[] = [
   { name: "createFolder", label: "Create folder" },
+  { name: "createFile", label: "Create text file" },
   { name: "upload", label: "Upload asset" },
   { name: "open", label: "Open" },
   { name: "settings", label: "Settings" },
diff --git a/apps/builder/app/builder/shared/asset-manager/asset-manager.tsx b/apps/builder/app/builder/shared/asset-manager/asset-manager.tsx
index 7f816bcbd858..0b9c5facc6cb 100644
--- a/apps/builder/app/builder/shared/asset-manager/asset-manager.tsx
+++ b/apps/builder/app/builder/shared/asset-manager/asset-manager.tsx
@@ -110,7 +110,7 @@ type AssetManagerProps = FolderNavigationProps & {
   panelActions?: Partial<
     Pick<
       AssetManagerItemActions,
-      "createFolder" | "upload" | "deleteUnusedAssets"
+      "createFolder" | "createFile" | "upload" | "deleteUnusedAssets"
     >
   >;
 };
diff --git a/apps/builder/app/builder/shared/asset-manager/asset-settings.tsx b/apps/builder/app/builder/shared/asset-manager/asset-settings.tsx
index 460dfc9ba158..d50a33b63915 100644
--- a/apps/builder/app/builder/shared/asset-manager/asset-settings.tsx
+++ b/apps/builder/app/builder/shared/asset-manager/asset-settings.tsx
@@ -70,7 +70,7 @@ import {
 } from "~/shared/sync/data-stores";
 import {
   formatAssetName,
-  parseAssetName,
+  getAssetDisplayNameParts,
 } from "@webstudio-is/project-build/runtime";
 import { AssetFolderSelector } from "./asset-folder-selector";
 import { moveAssetManagerItems } from "./asset-manager-operations";
@@ -313,38 +313,34 @@ const AssetSettingsContent = ({
   focusName: boolean;
 }) => {
   const { canDownloadAssets } = useStore($permissions);
-  const { size, meta, id, name } = asset;
-  const { basename, ext } = parseAssetName(name);
+  const { size, meta, id } = asset;
+  const { basename, ext } = getAssetDisplayNameParts(asset);
   const [filenameError, setFilenameError] = useState<string>();
-  const [filename, setFilename] = useLocalValue(
-    asset.filename ?? basename,
-    (newFilename) => {
-      const assetId = asset.id;
-      // validate filename
-      if (!isValidFilename(newFilename)) {
-        setFilenameError("Invalid filename");
-        return;
-      }
-      // validate duplicates
-      for (const asset of $assets.get().values()) {
-        if (asset.id !== assetId) {
-          const filename =
-            asset.filename ?? parseAssetName(asset.name).basename;
-          if (newFilename === filename) {
-            setFilenameError("Filename already used");
-            return;
-          }
+  const [filename, setFilename] = useLocalValue(basename, (newFilename) => {
+    const assetId = asset.id;
+    // validate filename
+    if (!isValidFilename(newFilename)) {
+      setFilenameError("Invalid filename");
+      return;
+    }
+    // validate duplicates
+    for (const asset of $assets.get().values()) {
+      if (asset.id !== assetId) {
+        const { basename: filename } = getAssetDisplayNameParts(asset);
+        if (newFilename === filename) {
+          setFilenameError("Filename already used");
+          return;
         }
       }
-      executeRuntimeMutation({
-        id: "assets.update",
-        input: {
-          assetId,
-          values: { filename: newFilename },
-        },
-      });
     }
-  );
+    executeRuntimeMutation({
+      id: "assets.update",
+      input: {
+        assetId,
+        values: { filename: newFilename },
+      },
+    });
+  });
   const [description, setDescription] = useLocalValue(
     asset.description ?? "",
     (newDescription) => {
@@ -456,10 +452,24 @@ const AssetSettingsContent = ({
         >
           <InputField
             id="asset-manager-filename"
+            aria-describedby={
+              ext === "" ? undefined : "asset-manager-filename-extension"
+            }
             autoFocus={focusName}
             readOnly={authPermit === "view"}
             color={filenameError ? "error" : undefined}
             value={filename}
+            suffix={
+              ext === "" ? undefined : (
+                <Text
+                  id="asset-manager-filename-extension"
+                  color="subtle"
+                  variant="labels"
+                >
+                  .{ext}
+                </Text>
+              )
+            }
             onChange={(event) => {
               setFilename(event.target.value);
               setFilenameError(undefined);
diff --git a/apps/builder/app/builder/shared/asset-manager/asset-thumbnail.tsx b/apps/builder/app/builder/shared/asset-manager/asset-thumbnail.tsx
index 5b9946caf238..df3d62934301 100644
--- a/apps/builder/app/builder/shared/asset-manager/asset-thumbnail.tsx
+++ b/apps/builder/app/builder/shared/asset-manager/asset-thumbnail.tsx
@@ -10,7 +10,7 @@ import { Image } from "./image";
 import brokenImage from "~/shared/images/broken-image-placeholder.svg";
 import {
   formatAssetName,
-  parseAssetName,
+  getAssetDisplayNameParts,
 } from "@webstudio-is/project-build/runtime";
 import type { IconComponent } from "@webstudio-is/icons";
 import type { AllowedFileExtension } from "@webstudio-is/sdk";
@@ -150,7 +150,7 @@ export const AssetThumbnail = ({
   const { canDownloadAssets } = useStore($permissions);
   const { asset } = assetContainer;
   const getDragItems = interactions.getDragItems;
-  const { basename, ext } = parseAssetName(asset.name);
+  const { basename, ext } = getAssetDisplayNameParts(asset);
   const alt = asset.description ?? formatAssetName(asset);
   const isUploading = assetContainer.status === "uploading";
   const assetType = detectAssetType(asset.name);
@@ -269,8 +269,8 @@ export const AssetThumbnail = ({
             <GenericFilePreview ext={ext} format={asset.format} />
           )
         }
-        label={asset.filename ?? basename}
-        labelSuffix={`.${ext}`}
+        label={basename}
+        labelSuffix={ext === "" ? undefined : `.${ext}`}
         path={folderPath}
         onPreviewClick={() => onChange?.(assetContainer)}
         onDoubleClick={onOpen}
diff --git a/apps/builder/app/builder/shared/assets/asset-upload.test.tsx b/apps/builder/app/builder/shared/assets/asset-upload.test.tsx
index 324131b1ef73..e8ec182afabd 100644
--- a/apps/builder/app/builder/shared/assets/asset-upload.test.tsx
+++ b/apps/builder/app/builder/shared/assets/asset-upload.test.tsx
@@ -15,17 +15,20 @@ afterEach(() => {
   vi.restoreAllMocks();
 });
 
-test("opens the same file input from its imperative action", () => {
+test("opens the hidden file input from its imperative action", () => {
   $authPermit.set("build");
   const inputClick = vi
     .spyOn(HTMLInputElement.prototype, "click")
     .mockImplementation(() => {});
   const ref = createRef<AssetUploadHandle>();
 
-  renderer.render(<AssetUpload ref={ref} type="file" folderId="folder" />);
+  const container = renderer.render(
+    <AssetUpload ref={ref} type="file" folderId="folder" showTrigger={false} />
+  );
   ref.current?.open();
 
   expect(inputClick).toHaveBeenCalledOnce();
+  expect(container.querySelector("button")).toBeNull();
 });
 
 test("groups upload files by their detected asset type", () => {
diff --git a/apps/builder/app/builder/shared/assets/asset-upload.tsx b/apps/builder/app/builder/shared/assets/asset-upload.tsx
index c98c17b6e2b9..69e0d6617795 100644
--- a/apps/builder/app/builder/shared/assets/asset-upload.tsx
+++ b/apps/builder/app/builder/shared/assets/asset-upload.tsx
@@ -111,6 +111,7 @@ type AssetUploadProps = {
   type: AssetType;
   accept?: string;
   folderId?: string;
+  showTrigger?: boolean;
 };
 
 export type AssetUploadHandle = {
@@ -118,7 +119,7 @@ export type AssetUploadHandle = {
 };
 
 const EnabledAssetUpload = forwardRef<AssetUploadHandle, AssetUploadProps>(
-  ({ accept, type, folderId }, forwardedRef) => {
+  ({ accept, type, folderId, showTrigger = true }, forwardedRef) => {
     const { inputRef, onChange } = useUpload(folderId);
     useImperativeHandle(forwardedRef, () => ({
       open: () => inputRef.current?.click(),
@@ -134,13 +135,15 @@ const EnabledAssetUpload = forwardRef<AssetUploadHandle, AssetUploadProps>(
           ref={inputRef}
           style={{ display: "none" }}
         />
-        <Button
-          aria-label="Upload asset"
-          color="ghost"
-          type="button"
-          onClick={() => inputRef?.current?.click()}
-          prefix={<UploadIcon />}
-        ></Button>
+        {showTrigger && (
+          <Button
+            aria-label="Upload asset"
+            color="ghost"
+            type="button"
+            onClick={() => inputRef?.current?.click()}
+            prefix={<UploadIcon />}
+          />
+        )}
       </form>
     );
   }
@@ -148,7 +151,7 @@ const EnabledAssetUpload = forwardRef<AssetUploadHandle, AssetUploadProps>(
 EnabledAssetUpload.displayName = "EnabledAssetUpload";
 
 export const AssetUpload = forwardRef<AssetUploadHandle, AssetUploadProps>(
-  ({ type, accept, folderId }, forwardedRef) => {
+  ({ type, accept, folderId, showTrigger }, forwardedRef) => {
     const authPermit = useStore($authPermit);
 
     if (authPermit !== "view") {
@@ -160,10 +163,15 @@ export const AssetUpload = forwardRef<AssetUploadHandle, AssetUploadProps>(
           type={type}
           accept={accept}
           folderId={folderId}
+          showTrigger={showTrigger}
         />
       );
     }
 
+    if (showTrigger === false) {
+      return null;
+    }
+
     return (
       <Flex>
         <Tooltip side="bottom" content="View mode. You can't upload assets.">
diff --git a/apps/builder/app/builder/shared/assets/asset-utils.test.ts b/apps/builder/app/builder/shared/assets/asset-utils.test.ts
index ad88e39da2a1..899a0cbefacb 100644
--- a/apps/builder/app/builder/shared/assets/asset-utils.test.ts
+++ b/apps/builder/app/builder/shared/assets/asset-utils.test.ts
@@ -2,10 +2,20 @@ import { expect, test, describe } from "vitest";
 import {
   getImageNameAndType,
   getSha256Hash,
-  detectAssetType,
+  getFileUploadFingerprint,
   uploadingFileDataToAsset,
 } from "./asset-utils";
 
+test("distinguishes upload fingerprints for equal files with different names", async () => {
+  const first = new File([""], "first.md");
+  const second = new File([""], "second.md");
+
+  const firstFingerprint = await getFileUploadFingerprint(first);
+  const secondFingerprint = await getFileUploadFingerprint(second);
+
+  expect(firstFingerprint).not.toBe(secondFingerprint);
+});
+
 describe("getImageNameAndType", () => {
   test("returns MIME type and filename for valid image", () => {
     const result = getImageNameAndType("photo.jpg");
@@ -80,55 +90,6 @@ describe("getSha256Hash", () => {
   });
 });
 
-describe("detectAssetType", () => {
-  test("detects image files", () => {
-    expect(detectAssetType("photo.jpg")).toBe("image");
-    expect(detectAssetType("image.png")).toBe("image");
-    expect(detectAssetType("graphic.gif")).toBe("image");
-    expect(detectAssetType("vector.svg")).toBe("image");
-    expect(detectAssetType("picture.webp")).toBe("image");
-  });
-
-  test("detects font files", () => {
-    expect(detectAssetType("font.woff")).toBe("font");
-    expect(detectAssetType("font.woff2")).toBe("font");
-    expect(detectAssetType("font.ttf")).toBe("font");
-    expect(detectAssetType("font.otf")).toBe("font");
-  });
-
-  test("detects video files", () => {
-    expect(detectAssetType("video.mp4")).toBe("video");
-    expect(detectAssetType("video.webm")).toBe("video");
-    expect(detectAssetType("video.mov")).toBe("video");
-    expect(detectAssetType("video.avi")).toBe("video");
-  });
-
-  test("returns file for other types", () => {
-    expect(detectAssetType("document.pdf")).toBe("file");
-    expect(detectAssetType("audio.mp3")).toBe("file");
-    expect(detectAssetType("data.json")).toBe("file");
-    expect(detectAssetType("doc.docx")).toBe("file");
-  });
-
-  test("is case-insensitive", () => {
-    expect(detectAssetType("PHOTO.JPG")).toBe("image");
-    expect(detectAssetType("FONT.WOFF2")).toBe("font");
-    expect(detectAssetType("VIDEO.MP4")).toBe("video");
-    expect(detectAssetType("DOC.PDF")).toBe("file");
-  });
-
-  test("handles files without extension", () => {
-    expect(detectAssetType("filename")).toBe("file");
-  });
-
-  test("handles files with multiple dots", () => {
-    expect(detectAssetType("my.photo.file.png")).toBe("image");
-    expect(detectAssetType("my.font.file.woff2")).toBe("font");
-    expect(detectAssetType("my.video.file.mp4")).toBe("video");
-    expect(detectAssetType("my.doc.file.pdf")).toBe("file");
-  });
-});
-
 describe("uploadingFileDataToAsset", () => {
   test("preserves the upload destination folder in the preview asset", () => {
     const result = uploadingFileDataToAsset({
diff --git a/apps/builder/app/builder/shared/assets/asset-utils.ts b/apps/builder/app/builder/shared/assets/asset-utils.ts
index 6f7e767b84c1..2294886182ce 100644
--- a/apps/builder/app/builder/shared/assets/asset-utils.ts
+++ b/apps/builder/app/builder/shared/assets/asset-utils.ts
@@ -7,17 +7,17 @@ import type {
 import { nanoid } from "nanoid";
 import {
   getMimeTypeByExtension,
+  getFileExtension,
   IMAGE_EXTENSIONS,
   detectAssetType,
   getAssetUrl,
 } from "@webstudio-is/sdk";
 import type { UploadingFileData } from "~/shared/nano-states";
 
-export { detectAssetType, getAssetUrl };
+export { getAssetUrl };
 
 export const getImageNameAndType = (fileName: string) => {
-  // Extract extension from filename
-  const extractedExt = fileName.split(".").pop()?.toLowerCase();
+  const extractedExt = getFileExtension(fileName)?.toLowerCase();
 
   if (!extractedExt) {
     return;
@@ -77,12 +77,15 @@ const readFileAsArrayBuffer = (file: File): Promise<ArrayBuffer> =>
     reader.readAsArrayBuffer(file);
   });
 
-export const getSha256HashOfFile = async (file: File) => {
+const getSha256HashOfFile = async (file: File) => {
   const arrayBuffer = await readFileAsArrayBuffer(file);
   const hashBuffer = await crypto.subtle.digest("SHA-256", arrayBuffer);
   return bufferToHex(hashBuffer);
 };
 
+export const getFileUploadFingerprint = async (file: File) =>
+  JSON.stringify([file.name, await getSha256HashOfFile(file)]);
+
 export const getMimeType = (file: File | URL) => {
   if (file instanceof File) {
     return file.type;
@@ -110,9 +113,7 @@ export const uploadingFileDataToAsset = (
   // Extract format from MIME type if available, otherwise from filename extension
   let format = mimeType.split("/")[1];
   if (!format) {
-    // Fallback to file extension if MIME type doesn't provide format
-    const match = fileName.match(/\.([^.]+)$/);
-    format = match ? match[1].toLowerCase() : "";
+    format = getFileExtension(fileName)?.toLowerCase() ?? "";
   }
 
   const assetType = detectAssetType(fileName);
diff --git a/apps/builder/app/builder/shared/assets/replace-asset.ts b/apps/builder/app/builder/shared/assets/replace-asset.ts
index 1c6be26e2327..08c3ed6ce772 100644
--- a/apps/builder/app/builder/shared/assets/replace-asset.ts
+++ b/apps/builder/app/builder/shared/assets/replace-asset.ts
@@ -1,11 +1,10 @@
 import type { Asset } from "@webstudio-is/sdk";
 import { toast } from "@webstudio-is/design-system";
 import { $assets } from "~/shared/sync/data-stores";
-import { $uploadingFilesDataStore } from "~/shared/nano-states";
 import { onNextTransactionComplete } from "~/shared/sync/project-queue";
 import { invalidateAssets } from "~/shared/resources";
 import { executeRuntimeMutation } from "~/shared/instance-utils/data";
-import { uploadAssets } from "./upload-assets";
+import { uploadSingleAsset } from "./upload-assets";
 
 /**
  * Replace an image asset with a new file.
@@ -26,21 +25,19 @@ export const replaceAsset = async (
     return;
   }
 
-  const fileToAssetId = await uploadAssets("image", [file], {
-    folderId: oldAsset.folderId,
-  });
-  const newAssetId = fileToAssetId.get(file);
-
-  if (!newAssetId) {
-    toast.error("Failed to upload replacement asset");
-    return;
-  }
-
+  let newAsset: Asset | undefined;
   try {
-    await waitForAsset(newAssetId);
+    newAsset = await uploadSingleAsset("image", file, {
+      folderId: oldAsset.folderId,
+    });
   } catch {
     return;
   }
+  if (newAsset === undefined) {
+    toast.error("Failed to upload replacement asset");
+    return;
+  }
+  const newAssetId = newAsset.id;
 
   try {
     const result = executeRuntimeMutation({
@@ -67,40 +64,3 @@ export const replaceAsset = async (
 
   toast.success("Asset replaced successfully");
 };
-
-const waitForAsset = (assetId: string): Promise<Asset> => {
-  // Check if asset already exists (avoids TDZ with synchronous subscribe callback)
-  const existingAsset = $assets.get().get(assetId);
-  if (existingAsset !== undefined) {
-    return Promise.resolve(existingAsset);
-  }
-
-  return new Promise((resolve, reject) => {
-    const cleanup = () => {
-      unsubscribeAssets();
-      unsubscribeUploads();
-    };
-    const check = () => {
-      const assets = $assets.get();
-      const asset = assets.get(assetId);
-      if (asset !== undefined) {
-        cleanup();
-        resolve(asset);
-        return;
-      }
-
-      const isUploading = $uploadingFilesDataStore
-        .get()
-        .some((fileData) => fileData.assetId === assetId);
-      if (isUploading === false) {
-        cleanup();
-        reject(new Error("Failed to upload replacement asset"));
-      }
-    };
-    const unsubscribeAssets = $assets.listen(check);
-    const unsubscribeUploads = $uploadingFilesDataStore.listen(check);
-    check();
-  });
-};
-
-export const __testing__ = { waitForAsset };
diff --git a/apps/builder/app/builder/shared/assets/upload-assets.test.ts b/apps/builder/app/builder/shared/assets/upload-assets.test.ts
index 6da71b49b00a..14e957dc881b 100644
--- a/apps/builder/app/builder/shared/assets/upload-assets.test.ts
+++ b/apps/builder/app/builder/shared/assets/upload-assets.test.ts
@@ -1,22 +1,22 @@
 import { beforeEach, describe, test, expect, vi } from "vitest";
-import { fetch } from "~/shared/fetch.client";
 import { __testing__ } from "./upload-assets";
 
-vi.mock("~/shared/fetch.client", () => ({
-  fetch: vi.fn(),
-}));
-
-const { createUploadTicket, deduplicateAssetName, getFilesData, uploadAsset } =
-  __testing__;
-const fetchMock = vi.mocked(fetch);
+const {
+  createUploadTicket,
+  deduplicateAssetName,
+  getFilesData,
+  getUniqueFilesData,
+  submitAssetUpload,
+} = __testing__;
+const request = vi.fn<typeof fetch>();
 
 describe("upload-assets", () => {
   beforeEach(() => {
-    fetchMock.mockReset();
+    request.mockReset();
   });
 
   test("requests upload tickets without client-supplied asset ids", async () => {
-    fetchMock.mockResolvedValue(
+    request.mockResolvedValue(
       new Response(
         JSON.stringify({ assetId: "server-asset-id", name: "upload-name" })
       )
@@ -28,34 +28,60 @@ describe("upload-assets", () => {
         projectId: "project-id",
         fileOrUrl: new File(["content"], "image.png", { type: "image/png" }),
         assetType: "image",
+        request,
       })
     ).resolves.toEqual({
       assetId: "server-asset-id",
       name: "upload-name",
     });
 
-    expect(fetchMock).toHaveBeenCalledOnce();
-    const [_url, init] = fetchMock.mock.calls[0] as [
+    expect(request).toHaveBeenCalledOnce();
+    const [_url, init] = request.mock.calls[0] as [
       string,
       { body: FormData; headers: Headers },
     ];
     expect(init.body.has("assetId")).toBe(false);
     expect(init.body.get("projectId")).toBe("project-id");
     expect(init.body.get("type")).toBe("image");
+    expect(init.body.get("filename")).toBe("image.png");
+    expect(init.body.get("displayFilename")).toBe("image");
     expect(init.headers.get("x-auth-token")).toBe("token");
   });
 
+  test("keeps the display name separate from the sanitized storage name", async () => {
+    request.mockResolvedValue(
+      new Response(
+        JSON.stringify({ assetId: "server-asset-id", name: "upload-name" })
+      )
+    );
+
+    await createUploadTicket({
+      authToken: undefined,
+      projectId: "project-id",
+      fileOrUrl: new File(["content"], "Campaign photo.png", {
+        type: "image/png",
+      }),
+      assetType: "image",
+      request,
+    });
+
+    const [, init] = request.mock.calls[0] as [string, { body: FormData }];
+    expect(init.body.get("filename")).toBe("Campaign_photo.png");
+    expect(init.body.get("displayFilename")).toBe("Campaign photo");
+  });
+
   test("reports non-error upload failures", async () => {
-    fetchMock.mockRejectedValue("network down");
+    request.mockRejectedValue("network down");
     const onCompleted = vi.fn();
     const onError = vi.fn();
 
-    await uploadAsset({
+    await submitAssetUpload({
       authToken: undefined,
       uploadName: "upload-name",
       fileOrUrl: new URL("https://example.com/image.png"),
       onCompleted,
       onError,
+      request,
     });
 
     expect(onCompleted).not.toHaveBeenCalled();
@@ -76,6 +102,18 @@ describe("upload-assets", () => {
     });
   });
 
+  test("releases object URLs discarded during deduplication", async () => {
+    const url = new URL("https://example.com/image.png");
+    const filesData = await getFilesData("image", [url, url]);
+    const revokeObjectURL = vi.fn();
+
+    const uniqueFilesData = getUniqueFilesData(filesData, revokeObjectURL);
+
+    expect(uniqueFilesData.size).toBe(1);
+    expect(revokeObjectURL).toHaveBeenCalledOnce();
+    expect(revokeObjectURL).toHaveBeenCalledWith(url.href);
+  });
+
   describe("deduplicateAssetName", () => {
     test("returns original name when no duplicates exist", () => {
       const existingNames = new Set(["other-file.png", "another-file.jpg"]);
@@ -107,6 +145,16 @@ describe("upload-assets", () => {
       expect(result).toBe("no-extension_1");
     });
 
+    test("treats a dotfile as a name without an extension", () => {
+      expect(deduplicateAssetName(".env", new Set([".env"]))).toBe(".env_1");
+    });
+
+    test("preserves extension casing", () => {
+      expect(deduplicateAssetName("photo.PNG", new Set(["photo.PNG"]))).toBe(
+        "photo_1.PNG"
+      );
+    });
+
     test("handles empty existing names set", () => {
       const existingNames = new Set<string>();
       const result = deduplicateAssetName("file.jpg", existingNames);
diff --git a/apps/builder/app/builder/shared/assets/upload-assets.tsx b/apps/builder/app/builder/shared/assets/upload-assets.tsx
index d2f414c195ba..41e67d763b20 100644
--- a/apps/builder/app/builder/shared/assets/upload-assets.tsx
+++ b/apps/builder/app/builder/shared/assets/upload-assets.tsx
@@ -1,6 +1,6 @@
 import warnOnce from "warn-once";
 import invariant from "tiny-invariant";
-import type { Asset } from "@webstudio-is/sdk";
+import { getFileNameParts, type Asset } from "@webstudio-is/sdk";
 import type { AssetType } from "@webstudio-is/asset-uploader";
 import { Box, toast, css, theme } from "@webstudio-is/design-system";
 import { sanitizeS3Key } from "@webstudio-is/asset-uploader";
@@ -21,9 +21,9 @@ import { executeRuntimeMutation } from "~/shared/instance-utils/data";
 import { formatAssetName } from "@webstudio-is/project-build/runtime";
 import {
   getFileName,
+  getFileUploadFingerprint,
   getMimeType,
   getSha256Hash,
-  getSha256HashOfFile,
 } from "./asset-utils";
 
 const safeDeleteAssets = (assetIds: Asset["id"][], projectId: string) => {
@@ -76,7 +76,7 @@ const getFilesData = async <T extends File | URL>(
   const filesData: UploadingFileData[] = [];
   for (const fileOrUrl of filesOrUrls) {
     if (fileOrUrl instanceof File) {
-      const fingerprintId = await getSha256HashOfFile(fileOrUrl);
+      const fingerprintId = await getFileUploadFingerprint(fileOrUrl);
       filesData.push({
         source: "file" as const,
         assetId: "",
@@ -118,6 +118,54 @@ const deleteUploadingFileData = (id: UploadingFileData["assetId"]) => {
   );
 };
 
+const getUniqueFilesData = (
+  filesData: UploadingFileData[],
+  revokeObjectURL = URL.revokeObjectURL
+) => {
+  const uniqueFilesData = new Map<string, UploadingFileData>();
+  for (const fileData of filesData) {
+    if (uniqueFilesData.has(fileData.fingerprintId)) {
+      revokeObjectURL(fileData.objectURL);
+      continue;
+    }
+    uniqueFilesData.set(fileData.fingerprintId, fileData);
+  }
+  return uniqueFilesData;
+};
+
+export const waitForAssetUpload = (assetId: string): Promise<Asset> => {
+  const existingAsset = $assets.get().get(assetId);
+  if (existingAsset !== undefined) {
+    return Promise.resolve(existingAsset);
+  }
+
+  return new Promise((resolve, reject) => {
+    const cleanup = () => {
+      unsubscribeAssets();
+      unsubscribeUploads();
+    };
+    const check = () => {
+      const asset = $assets.get().get(assetId);
+      if (asset !== undefined) {
+        cleanup();
+        resolve(asset);
+        return;
+      }
+
+      const isUploading = $uploadingFilesDataStore
+        .get()
+        .some((fileData) => fileData.assetId === assetId);
+      if (isUploading === false) {
+        cleanup();
+        reject(new Error("Failed to upload asset"));
+      }
+    };
+    const unsubscribeAssets = $assets.listen(check);
+    const unsubscribeUploads = $uploadingFilesDataStore.listen(check);
+    check();
+  });
+};
+
 const getVideoDimensions = async (file: File) => {
   return new Promise<{ width: number; height: number }>((resolve, reject) => {
     const url = URL.createObjectURL(file);
@@ -137,13 +185,12 @@ const getVideoDimensions = async (file: File) => {
 };
 
 const deduplicateAssetName = (name: string, existingNames: Set<string>) => {
+  const { basename, extension } = getFileNameParts(name);
+  const extensionWithDot = extension === "" ? "" : `.${extension}`;
   // eslint-disable-next-line no-constant-condition
   for (let index = 0; true; index += 1) {
     const suffix = index === 0 ? "" : `_${index}`;
-    const lastDotAt = name.lastIndexOf(".");
-    const basename = lastDotAt === -1 ? name : name.slice(0, lastDotAt);
-    const ext = lastDotAt === -1 ? "" : name.slice(lastDotAt);
-    const nameWithSuffix = basename + suffix + ext;
+    const nameWithSuffix = basename + suffix + extensionWithDot;
     if (!existingNames.has(nameWithSuffix)) {
       return nameWithSuffix;
     }
@@ -158,18 +205,20 @@ const createAssetUploadHeaders = (authToken: undefined | string) => {
   return headers;
 };
 
-const uploadAsset = async ({
+const submitAssetUpload = async ({
   authToken,
   uploadName,
   fileOrUrl,
   onCompleted,
   onError,
+  request = fetch,
 }: {
   authToken: undefined | string;
   uploadName: string;
   fileOrUrl: File | URL;
   onCompleted: (data: AssetActionResponse) => void;
   onError: (error: string) => void;
+  request?: typeof fetch;
 }) => {
   try {
     const mimeType = getMimeType(fileOrUrl);
@@ -195,7 +244,7 @@ const uploadAsset = async ({
       height = videoSize.height;
     }
 
-    const uploadResponse = await fetch(
+    const uploadResponse = await request(
       restAssetsUploadPath({ name: uploadName, width, height }),
       {
         method: "POST",
@@ -226,30 +275,34 @@ const createUploadTicket = async ({
   projectId,
   fileOrUrl,
   assetType,
+  request = fetch,
 }: {
   authToken: undefined | string;
   projectId: string;
   fileOrUrl: File | URL;
   assetType: AssetType;
+  request?: typeof fetch;
 }): Promise<UploadTicket> => {
   const fileName = getFileName(fileOrUrl);
   const metaFormData = new FormData();
   metaFormData.append("projectId", projectId);
   metaFormData.append("type", assetType);
-  // sanitizeS3Key here is just because of https://github.com/remix-run/remix/issues/4443
-  // should be removed after fix
   const existingNames = new Set<string>();
   for (const asset of $assets.get().values()) {
     existingNames.add(formatAssetName(asset));
   }
+  const deduplicatedFilename = deduplicateAssetName(fileName, existingNames);
+  // sanitizeS3Key here is just because of https://github.com/remix-run/remix/issues/4443
+  // should be removed after fix
+  metaFormData.append("filename", sanitizeS3Key(deduplicatedFilename));
   metaFormData.append(
-    "filename",
-    deduplicateAssetName(sanitizeS3Key(fileName), existingNames)
+    "displayFilename",
+    getFileNameParts(deduplicatedFilename).basename
   );
 
   const authHeaders = createAssetUploadHeaders(authToken);
 
-  const metaResponse = await fetch(restAssetsPath(), {
+  const metaResponse = await request(restAssetsPath(), {
     method: "POST",
     body: metaFormData,
     headers: authHeaders,
@@ -332,7 +385,10 @@ const processUpload = async (
     const currentProjectId = $project.get()?.id;
     if (currentProjectId !== projectId) {
       toast.error("Project has been changed, files will not be uploaded");
-      // Can cause data corrupiton
+      for (const fileData of filesData) {
+        URL.revokeObjectURL(fileData.objectURL);
+        deleteUploadingFileData(fileData.assetId);
+      }
       continue;
     }
 
@@ -348,7 +404,7 @@ const processUpload = async (
         continue;
       }
 
-      await uploadAsset({
+      await submitAssetUpload({
         authToken,
         uploadName: fileData.uploadName,
         fileOrUrl:
@@ -384,9 +440,7 @@ export const uploadAssets = async <T extends File | URL>(
   const filesData = await getFilesData(type, filesOrUrls, options.folderId);
 
   // Filter out duplicates inside filesData
-  const uniqFilesDataMap = new Map(
-    filesData.map((fileData) => [fileData.fingerprintId, fileData])
-  );
+  const uniqueFilesDataByFingerprint = getUniqueFilesData(filesData);
 
   // Filter out duplicates already being uploaded
   const existingUploadsByFingerprint = new Map(
@@ -395,24 +449,29 @@ export const uploadAssets = async <T extends File | URL>(
       .map((fileData) => [fileData.fingerprintId, fileData])
   );
 
-  for (const [fingerprintId] of existingUploadsByFingerprint) {
-    if (uniqFilesDataMap.has(fingerprintId)) {
-      const fileData = uniqFilesDataMap.get(fingerprintId)!;
-      uniqFilesDataMap.delete(fingerprintId);
-      toast.info("Asset already exists", {
-        icon: <ToastImageInfo objectURL={fileData.objectURL} />,
-      });
+  for (const [
+    fingerprintId,
+    existingFileData,
+  ] of existingUploadsByFingerprint) {
+    const fileData = uniqueFilesDataByFingerprint.get(fingerprintId);
+    if (fileData === undefined) {
+      continue;
     }
+    uniqueFilesDataByFingerprint.delete(fingerprintId);
+    URL.revokeObjectURL(fileData.objectURL);
+    toast.info("Asset already exists", {
+      icon: <ToastImageInfo objectURL={existingFileData.objectURL} />,
+    });
   }
 
-  const uniqFilesData = [...uniqFilesDataMap.values()];
+  const uniqueFilesData = [...uniqueFilesDataByFingerprint.values()];
 
   const uploadTickets = new Map<
     UploadingFileData["fingerprintId"],
     UploadTicket
   >();
   const ticketedFilesData: UploadingFileData[] = [];
-  for (const fileData of uniqFilesData) {
+  for (const fileData of uniqueFilesData) {
     try {
       const ticket = await createUploadTicket({
         authToken,
@@ -465,9 +524,19 @@ export const uploadAssets = async <T extends File | URL>(
   return res;
 };
 
+export const uploadSingleAsset = async (
+  type: AssetType,
+  file: File,
+  options: { folderId?: string } = {}
+): Promise<Asset | undefined> => {
+  const assetId = (await uploadAssets(type, [file], options)).get(file);
+  return assetId === undefined ? undefined : waitForAssetUpload(assetId);
+};
+
 export const __testing__ = {
   createUploadTicket,
   deduplicateAssetName,
   getFilesData,
-  uploadAsset,
+  getUniqueFilesData,
+  submitAssetUpload,
 };
diff --git a/apps/builder/app/builder/shared/assets/replace-asset.test.ts b/apps/builder/app/builder/shared/assets/wait-for-asset-upload.test.ts
similarity index 61%
rename from apps/builder/app/builder/shared/assets/replace-asset.test.ts
rename to apps/builder/app/builder/shared/assets/wait-for-asset-upload.test.ts
index d6c006c083db..b3c53214be4c 100644
--- a/apps/builder/app/builder/shared/assets/replace-asset.test.ts
+++ b/apps/builder/app/builder/shared/assets/wait-for-asset-upload.test.ts
@@ -2,9 +2,7 @@ import { beforeEach, expect, test } from "vitest";
 import type { Asset } from "@webstudio-is/sdk";
 import { $uploadingFilesDataStore } from "~/shared/nano-states";
 import { $assets } from "~/shared/sync/data-stores";
-import { __testing__ } from "./replace-asset";
-
-const { waitForAsset } = __testing__;
+import { waitForAssetUpload } from "./upload-assets";
 
 const asset = {
   id: "replacement",
@@ -22,26 +20,26 @@ beforeEach(() => {
   $uploadingFilesDataStore.set([]);
 });
 
-test("resolves an existing replacement asset", async () => {
+test("resolves an existing asset", async () => {
   $assets.set(new Map([[asset.id, asset]]));
 
-  await expect(waitForAsset(asset.id)).resolves.toBe(asset);
+  await expect(waitForAssetUpload(asset.id)).resolves.toBe(asset);
 });
 
-test("waits for a replacement asset to finish uploading", async () => {
+test("waits for an asset to finish uploading", async () => {
   $uploadingFilesDataStore.set([{ assetId: asset.id } as never]);
-  const result = waitForAsset(asset.id);
+  const result = waitForAssetUpload(asset.id);
 
   $assets.set(new Map([[asset.id, asset]]));
 
   await expect(result).resolves.toBe(asset);
 });
 
-test("rejects when a replacement upload fails", async () => {
+test("rejects when an upload fails", async () => {
   $uploadingFilesDataStore.set([{ assetId: asset.id } as never]);
-  const result = waitForAsset(asset.id);
+  const result = waitForAssetUpload(asset.id);
 
   $uploadingFilesDataStore.set([]);
 
-  await expect(result).rejects.toThrow("Failed to upload replacement asset");
+  await expect(result).rejects.toThrow("Failed to upload asset");
 });
diff --git a/apps/builder/app/routes/cgi.asset.$.ts b/apps/builder/app/routes/cgi.asset.$.ts
index 3851756da326..eb89b35aa148 100644
--- a/apps/builder/app/routes/cgi.asset.$.ts
+++ b/apps/builder/app/routes/cgi.asset.$.ts
@@ -4,6 +4,7 @@ import { createReadableStreamFromReadable } from "@remix-run/node";
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import {
   getMimeTypeByFilename,
+  getFileExtension,
   isAllowedExtension,
   decodePathFragment,
 } from "@webstudio-is/sdk";
@@ -39,7 +40,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   }
 
   // Validate file extension against allowed types
-  const extension = name.split(".").pop()?.toLowerCase();
+  const extension = getFileExtension(name)?.toLowerCase();
   const contentType = getMimeTypeByFilename(name);
 
   // Reject files with disallowed extensions or MIME types
diff --git a/apps/builder/app/routes/rest.assets.tsx b/apps/builder/app/routes/rest.assets.tsx
index 4d14ebf97206..16f4e9eeca97 100644
--- a/apps/builder/app/routes/rest.assets.tsx
+++ b/apps/builder/app/routes/rest.assets.tsx
@@ -1,5 +1,6 @@
 import { json, type ActionFunctionArgs } from "@remix-run/server-runtime";
 import { createUploadTicket } from "@webstudio-is/asset-uploader/index.server";
+import isValidFilename from "valid-filename";
 import { createContext } from "~/shared/context.server";
 import { preventCrossOriginCookie } from "~/services/no-cross-origin-cookie";
 import { checkCsrf } from "~/services/csrf-session.server";
@@ -27,18 +28,23 @@ export const action = async (props: ActionFunctionArgs) => {
       const projectId = formData.get("projectId");
       const type = formData.get("type");
       const filename = formData.get("filename");
+      const displayFilename = formData.get("displayFilename");
       if (
         typeof projectId !== "string" ||
         typeof type !== "string" ||
-        typeof filename !== "string"
+        typeof filename !== "string" ||
+        (displayFilename !== null &&
+          (typeof displayFilename !== "string" ||
+            isValidFilename(displayFilename) === false))
       ) {
-        throw Error("Project id, type or filename are missing");
+        throw Error("Project id, type or filename are invalid");
       }
       const ticket = await createUploadTicket(
         {
           projectId,
           type,
           filename,
+          displayFilename: displayFilename ?? undefined,
         },
         context
       );
diff --git a/apps/builder/e2e/flows/assets-panel.ts b/apps/builder/e2e/flows/assets-panel.ts
index a0511c4da887..418eccb12a1d 100644
--- a/apps/builder/e2e/flows/assets-panel.ts
+++ b/apps/builder/e2e/flows/assets-panel.ts
@@ -17,6 +17,13 @@ const getAssetTitleLocator = ({
   return page.locator(`[title^="${name}"]`).first();
 };
 
+const getAssetsPanel = (page: Page) =>
+  page.getByRole("tabpanel", { name: "Assets" });
+
+const openAddAssetMenu = async (page: Page) => {
+  await getAssetsPanel(page).getByRole("button", { name: "Add asset" }).click();
+};
+
 export const openAssetsPanel = async ({
   page,
   force = false,
@@ -25,9 +32,8 @@ export const openAssetsPanel = async ({
   force?: boolean;
 }) => {
   await page.getByRole("tab", { name: "Assets" }).click({ force });
-  await page
-    .getByRole("tabpanel", { name: "Assets" })
-    .getByRole("button", { name: "Upload asset" })
+  await getAssetsPanel(page)
+    .getByRole("button", { name: "Add asset" })
     .waitFor();
 };
 
@@ -38,7 +44,8 @@ export const createAssetFolder = async ({
   page: Page;
   name: string;
 }) => {
-  await page.getByRole("button", { name: "Create asset folder" }).click();
+  await openAddAssetMenu(page);
+  await page.getByRole("menuitem", { name: "Create folder" }).click();
   const dialog = page.getByRole("dialog", { name: "New folder" });
   await dialog.getByLabel("Folder", { exact: true }).fill(name);
   await Promise.all([
@@ -83,7 +90,8 @@ export const uploadAsset = async ({
   filename: string;
 }) => {
   const fileChooserPromise = page.waitForEvent("filechooser");
-  await page.getByRole("button", { name: "Upload asset" }).click();
+  await openAddAssetMenu(page);
+  await page.getByRole("menuitem", { name: "Upload", exact: true }).click();
   const fileChooser = await fileChooserPromise;
   const save = waitForChangeToBeSaved({ page });
   await fileChooser.setFiles(assetFixturePath(filename));
diff --git a/packages/asset-uploader/src/revision.test.ts b/packages/asset-uploader/src/revision.test.ts
index 31830da25716..400365383a81 100644
--- a/packages/asset-uploader/src/revision.test.ts
+++ b/packages/asset-uploader/src/revision.test.ts
@@ -69,6 +69,12 @@ describe("asset content revisions", () => {
         filename: "configuration",
       })
     ).toBe("configuration.json");
+    expect(
+      getRevisionFilename({
+        name: "test_nCEugJxJwUd_MJcgPodZr.md",
+        filename: null,
+      })
+    ).toBe("test.md");
   });
 
   test("uploads an immutable revision and keeps the asset id", async () => {
diff --git a/packages/asset-uploader/src/revision.ts b/packages/asset-uploader/src/revision.ts
index f29c6f0c7b7a..91339572172f 100644
--- a/packages/asset-uploader/src/revision.ts
+++ b/packages/asset-uploader/src/revision.ts
@@ -1,5 +1,8 @@
-import { basename, extname } from "node:path";
-import { isTextFileAsset, type Asset } from "@webstudio-is/sdk";
+import {
+  formatAssetName,
+  isTextFileAsset,
+  type Asset,
+} from "@webstudio-is/sdk";
 import {
   authorizeProject,
   AuthorizationError,
@@ -8,7 +11,7 @@ import {
 import type { Client } from "@webstudio-is/postgrest/index.server";
 import type { AssetClient } from "./client";
 import { uploadFileData } from "./upload";
-import { getUniqueFilename } from "./utils/get-unique-filename";
+import { createUniqueAssetFilename } from "./utils/get-unique-filename";
 import { sanitizeS3Key } from "./utils/sanitize-s3-key";
 import { formatAsset } from "./utils/format-asset";
 import { assertPostgrestSuccess } from "./patch-utils";
@@ -22,13 +25,7 @@ const getRevisionFilename = ({
   name: string;
   filename: string | null;
 }) => {
-  const extension = extname(name);
-  const storedBasename = basename(name, extension);
-  const suffixAt = storedBasename.lastIndexOf("_");
-  const displayBasename =
-    filename ??
-    (suffixAt === -1 ? storedBasename : storedBasename.slice(0, suffixAt));
-  return sanitizeS3Key(`${displayBasename}${extension}`);
+  return sanitizeS3Key(formatAssetName({ name, filename }));
 };
 
 export const swapAssetFileWithClient = async (
@@ -133,7 +130,7 @@ export const updateAssetContent = async (
     throw new Error("This asset is not an editable text file");
   }
 
-  const revisionName = getUniqueFilename(
+  const revisionName = createUniqueAssetFilename(
     getRevisionFilename({
       name: currentAsset.name,
       filename: currentAsset.filename,
diff --git a/packages/asset-uploader/src/upload.test.ts b/packages/asset-uploader/src/upload.test.ts
index 40089df53541..417219938430 100644
--- a/packages/asset-uploader/src/upload.test.ts
+++ b/packages/asset-uploader/src/upload.test.ts
@@ -79,6 +79,7 @@ describe("createUploadTicket", () => {
           id: "asset-1",
           projectId: "project-1",
           name: expect.stringMatching(/^photo_.+\.png$/),
+          filename: "photo",
           description: "Campaign photo",
           folderId: "campaign",
         });
@@ -107,6 +108,37 @@ describe("createUploadTicket", () => {
     });
   });
 
+  test("preserves the requested display name while sanitizing storage", async () => {
+    server.use(
+      ownershipHandler,
+      db.head("Asset", () => empty({ headers: { "Content-Range": "*/0" } })),
+      db.head("File", () => empty({ headers: { "Content-Range": "*/0" } })),
+      db.post("File", async ({ request }) => {
+        expect(await request.json()).toMatchObject({
+          name: expect.stringMatching(/^Campaign_photo_.+\.png$/),
+        });
+        return empty({ status: 201 });
+      }),
+      db.post("Asset", async ({ request }) => {
+        expect(await request.json()).toMatchObject({
+          filename: "Campaign photo",
+        });
+        return empty({ status: 201 });
+      })
+    );
+
+    await createUploadTicket(
+      {
+        projectId: "project-1",
+        type: "image/png",
+        filename: "Campaign_photo.png",
+        displayFilename: "Campaign photo",
+      },
+      createContext(),
+      () => "asset-1"
+    );
+  });
+
   test("throws when uploaded assets and recent uploads reach the limit", async () => {
     server.use(
       ownershipHandler,
@@ -225,11 +257,13 @@ describe("createUploadTicket", () => {
         id: "asset-collision",
         projectId: "project-4",
         name: (insertedFiles[0] as { name: string }).name,
+        filename: "renamed-photo",
       },
       {
         id: "asset-retry",
         projectId: "project-4",
         name: (insertedFiles[1] as { name: string }).name,
+        filename: "renamed-photo",
       },
     ]);
     expect(deletedFiles).toEqual([
diff --git a/packages/asset-uploader/src/upload.ts b/packages/asset-uploader/src/upload.ts
index 8552ab36ba20..cf038232a50a 100644
--- a/packages/asset-uploader/src/upload.ts
+++ b/packages/asset-uploader/src/upload.ts
@@ -5,10 +5,10 @@ import {
   getProjectPlanFeatures,
 } from "@webstudio-is/trpc-interface/index.server";
 import { nanoid } from "nanoid";
-import type { Asset } from "@webstudio-is/sdk";
+import { getFileNameParts, type Asset } from "@webstudio-is/sdk";
 import type { Database } from "@webstudio-is/postgrest/index.server";
 import type { AssetClient } from "./client";
-import { getUniqueFilename } from "./utils/get-unique-filename";
+import { createUniqueAssetFilename } from "./utils/get-unique-filename";
 import { sanitizeS3Key } from "./utils/sanitize-s3-key";
 import { formatAsset } from "./utils/format-asset";
 
@@ -16,6 +16,7 @@ type UploadData = {
   projectId: string;
   type: string;
   filename: string;
+  displayFilename?: string;
   description?: string;
   folderId?: string;
 };
@@ -51,7 +52,15 @@ export const createUploadTicket = async (
   context: AppContext,
   createId: () => Asset["id"] = nanoid
 ): Promise<UploadTicket> => {
-  const { projectId, type, filename, description, folderId } = data;
+  const {
+    projectId,
+    type,
+    filename,
+    displayFilename = getFileNameParts(filename).basename,
+    description,
+    folderId,
+  } = data;
+  const sanitizedFilename = sanitizeS3Key(filename);
   const canEdit = await authorizeProject.hasProjectPermit(
     { projectId, permit: "edit" },
     context
@@ -118,7 +127,7 @@ export const createUploadTicket = async (
     attempt += 1
   ) {
     const assetId = createId();
-    const name = getUniqueFilename(sanitizeS3Key(filename));
+    const name = createUniqueAssetFilename(sanitizedFilename);
 
     const fileInsert = await context.postgrest.client.from("File").insert({
       name,
@@ -136,6 +145,7 @@ export const createUploadTicket = async (
       id: assetId,
       projectId,
       name,
+      filename: displayFilename,
       description,
       folderId,
     });
diff --git a/packages/asset-uploader/src/utils/font-data.ts b/packages/asset-uploader/src/utils/font-data.ts
index 92fbc62552ea..0e6f44ea3c7e 100644
--- a/packages/asset-uploader/src/utils/font-data.ts
+++ b/packages/asset-uploader/src/utils/font-data.ts
@@ -7,6 +7,7 @@ import {
   type VariationAxes,
   type FontStyle,
 } from "@webstudio-is/fonts";
+import { getFileNameParts } from "@webstudio-is/sdk";
 
 // same default fontkit uses internally
 const defaultLanguage = "en";
@@ -54,8 +55,7 @@ const normalizeFamily = (
     return familyPartsNormalized.join(" ");
   }
   // Broken fonts may lack any family information, so last resort is to use the file name
-  const extensionIndex = fileName.lastIndexOf(".");
-  return extensionIndex === -1 ? fileName : fileName.slice(0, extensionIndex);
+  return getFileNameParts(fileName).basename;
 };
 
 type FontDataStatic = {
diff --git a/packages/asset-uploader/src/utils/get-unique-filename.test.ts b/packages/asset-uploader/src/utils/get-unique-filename.test.ts
new file mode 100644
index 000000000000..239b56137b7d
--- /dev/null
+++ b/packages/asset-uploader/src/utils/get-unique-filename.test.ts
@@ -0,0 +1,10 @@
+import { expect, test } from "vitest";
+import { createUniqueAssetFilename } from "./get-unique-filename";
+
+test("adds a storage suffix while preserving filename parts", () => {
+  const image = createUniqueAssetFilename("photo.PNG");
+  expect(image).toMatch(/^photo_.+\.PNG$/);
+
+  const dotfile = createUniqueAssetFilename(".env");
+  expect(dotfile).toMatch(/^\.env_.+$/);
+});
diff --git a/packages/asset-uploader/src/utils/get-unique-filename.ts b/packages/asset-uploader/src/utils/get-unique-filename.ts
index 821edaf246aa..bf748a62acc7 100644
--- a/packages/asset-uploader/src/utils/get-unique-filename.ts
+++ b/packages/asset-uploader/src/utils/get-unique-filename.ts
@@ -1,9 +1,7 @@
-import * as path from "node:path";
 import { nanoid } from "nanoid";
+import { getFileNameParts } from "@webstudio-is/sdk";
 
-export const getUniqueFilename = (filename: string): string => {
-  const id = nanoid();
-  const extension = path.extname(filename);
-  const name = path.basename(filename, extension);
-  return `${name}_${id}${extension}`;
+export const createUniqueAssetFilename = (filename: string) => {
+  const { basename, extension } = getFileNameParts(filename);
+  return `${basename}_${nanoid()}${extension === "" ? "" : `.${extension}`}`;
 };
diff --git a/packages/project-build/src/runtime/assets.test.ts b/packages/project-build/src/runtime/assets.test.ts
index d3217c68bd70..a4e442549edb 100644
--- a/packages/project-build/src/runtime/assets.test.ts
+++ b/packages/project-build/src/runtime/assets.test.ts
@@ -30,8 +30,6 @@ import {
   getBrowserAssetFormat,
   imageDescriptionsSetInput,
   listAssets,
-  formatAssetName,
-  parseAssetName,
   parseAssetType,
   replaceAsset,
   replaceAssetInStyleValueMutable,
@@ -105,67 +103,6 @@ const state = {
   dataSources: new Map(),
 } satisfies BuilderState;
 
-describe("asset name helpers", () => {
-  test("parses name with hash and extension", () => {
-    expect(parseAssetName("hello_hash.ext")).toEqual({
-      basename: "hello",
-      hash: "hash",
-      ext: "ext",
-    });
-  });
-
-  test("parses name without hash", () => {
-    expect(parseAssetName("hello.ext")).toEqual({
-      basename: "hello",
-      hash: "",
-      ext: "ext",
-    });
-  });
-
-  test("parses name with multiple underscores", () => {
-    expect(parseAssetName("hello_hash1.ext_hash2")).toEqual({
-      basename: "hello",
-      hash: "hash1",
-      ext: "ext_hash2",
-    });
-  });
-
-  test("parses name with hash but no extension", () => {
-    expect(parseAssetName("hello_hash1_hash2")).toEqual({
-      basename: "hello_hash1",
-      hash: "hash2",
-      ext: "",
-    });
-  });
-
-  test("formats asset with filename", () => {
-    expect(
-      formatAssetName({
-        name: "uploaded_abc123.jpg",
-        filename: "myimage",
-      })
-    ).toBe("myimage.jpg");
-  });
-
-  test("formats asset without filename", () => {
-    expect(
-      formatAssetName({
-        name: "uploaded_abc123.jpg",
-        filename: undefined,
-      })
-    ).toBe("uploaded.jpg");
-  });
-
-  test("formats asset with no extension", () => {
-    expect(
-      formatAssetName({
-        name: "uploaded_abc123",
-        filename: "document",
-      })
-    ).toBe("document.");
-  });
-});
-
 describe("asset upload helpers", () => {
   test("preserves browser asset format detection", () => {
     expect(
@@ -180,6 +117,12 @@ describe("asset upload helpers", () => {
         name: "video.mp4",
       })
     ).toBe("mp4");
+    expect(
+      getBrowserAssetFormat({
+        contentType: "application/octet-stream",
+        name: ".mp4",
+      })
+    ).toBeUndefined();
     expect(() =>
       getBrowserAssetFormat({
         contentType: "script/javascript",
diff --git a/packages/project-build/src/runtime/assets.ts b/packages/project-build/src/runtime/assets.ts
index 00453c1e9ca8..86a7293e8d2f 100644
--- a/packages/project-build/src/runtime/assets.ts
+++ b/packages/project-build/src/runtime/assets.ts
@@ -5,8 +5,12 @@ import { z } from "zod";
 import {
   ALLOWED_FILE_TYPES,
   getAllPages,
+  getFileExtension,
   getStyleDeclKey,
   isAllowedMimeCategory,
+  formatAssetName,
+  getAssetDisplayNameParts,
+  parseAssetName,
   type Asset,
   type DataSource,
   type Pages,
@@ -194,7 +198,7 @@ export const getBrowserAssetFormat = ({
   contentType: string | null;
   name: string;
 }) => {
-  const fileExtension = name.split(".").pop()?.toLowerCase();
+  const fileExtension = getFileExtension(name)?.toLowerCase();
   const correctMimeType =
     ALLOWED_FILE_TYPES[fileExtension as keyof typeof ALLOWED_FILE_TYPES] ??
     contentType?.split(";")[0];
@@ -558,35 +562,10 @@ export const findAsset = (assets: Iterable<Asset>, assetId: Asset["id"]) => {
   }
 };
 
-export type ParsedAssetName = {
-  basename: string;
-  hash: string;
-  ext: string;
-};
-
-export const parseAssetName = (name: string): ParsedAssetName => {
-  let hash = "";
-  let ext = "";
-  const lastDotAt = name.lastIndexOf(".");
-  if (lastDotAt > -1) {
-    ext = name.slice(lastDotAt + 1);
-    name = name.slice(0, lastDotAt);
-  }
-  const lastUnderscoreAt = name.lastIndexOf("_");
-  if (lastUnderscoreAt > -1) {
-    hash = name.slice(lastUnderscoreAt + 1);
-    name = name.slice(0, lastUnderscoreAt);
-  }
-  return { basename: name, hash, ext };
-};
-
-export const formatAssetName = (asset: Pick<Asset, "name" | "filename">) => {
-  const { basename, ext } = parseAssetName(asset.name);
-  return `${asset.filename ?? basename}.${ext}`;
-};
+export { formatAssetName, getAssetDisplayNameParts, parseAssetName };
 
 export const getAssetDisplayFilename = (asset: Asset) =>
-  asset.filename ?? asset.name.replace(/\.[^/.]+$/, "");
+  getAssetDisplayNameParts(asset).basename;
 
 const assertAssetFolderExists = (
   assetFolders: BuilderState["assetFolders"],
diff --git a/packages/sdk/src/assets.test.ts b/packages/sdk/src/assets.test.ts
index 8721bbd127d6..c2c46f2ca97b 100644
--- a/packages/sdk/src/assets.test.ts
+++ b/packages/sdk/src/assets.test.ts
@@ -21,9 +21,106 @@ import {
   getAssetMime,
   doesAssetMatchMimePatterns,
   getAssetTextEditorLanguage,
+  formatAssetName,
+  getFileExtension,
+  getFileNameParts,
   isTextFileAsset,
+  parseAssetName,
 } from "./assets";
 
+describe("getFileExtension", () => {
+  test.each([
+    ["file.md", "md"],
+    ["FILE.MD", "MD"],
+    ["archive.tar.gz", "gz"],
+    ["/folder.with-dot/file.md", "md"],
+    [".md", undefined],
+    ["file.", undefined],
+    ["file", undefined],
+  ])("extracts the extension from %s", (fileName, expected) => {
+    expect(getFileExtension(fileName)).toBe(expected);
+  });
+});
+
+describe("getFileNameParts", () => {
+  test.each([
+    ["file.md", { basename: "file", extension: "md" }],
+    ["archive.tar.GZ", { basename: "archive.tar", extension: "GZ" }],
+    [".env", { basename: ".env", extension: "" }],
+    ["README", { basename: "README", extension: "" }],
+  ])("splits %s", (fileName, expected) => {
+    expect(getFileNameParts(fileName)).toEqual(expected);
+  });
+});
+
+describe("parseAssetName", () => {
+  test("parses a storage name with an extension", () => {
+    expect(parseAssetName("hello_hash.ext")).toEqual({
+      basename: "hello",
+      hash: "hash",
+      ext: "ext",
+    });
+  });
+
+  test("parses a name without a storage id", () => {
+    expect(parseAssetName("hello.ext")).toEqual({
+      basename: "hello",
+      hash: "",
+      ext: "ext",
+    });
+  });
+
+  test("supports legacy storage ids", () => {
+    expect(parseAssetName("hello_hash1.ext_hash2")).toEqual({
+      basename: "hello",
+      hash: "hash1",
+      ext: "ext_hash2",
+    });
+  });
+
+  test("keeps underscores inside a Nano ID out of the display name", () => {
+    expect(parseAssetName("test_nCEugJxJwUd_MJcgPodZr.md")).toEqual({
+      basename: "test",
+      hash: "nCEugJxJwUd_MJcgPodZr",
+      ext: "md",
+    });
+  });
+
+  test("parses a storage name without an extension", () => {
+    expect(parseAssetName("hello_hash1_hash2")).toEqual({
+      basename: "hello_hash1",
+      hash: "hash2",
+      ext: "",
+    });
+  });
+});
+
+describe("formatAssetName", () => {
+  test("uses a persisted display basename", () => {
+    expect(
+      formatAssetName({
+        name: "uploaded_abc123.jpg",
+        filename: "myimage",
+      })
+    ).toBe("myimage.jpg");
+  });
+
+  test("derives the display basename for a legacy asset", () => {
+    expect(formatAssetName({ name: "uploaded_abc123.jpg" })).toBe(
+      "uploaded.jpg"
+    );
+  });
+
+  test("does not append a dot without an extension", () => {
+    expect(
+      formatAssetName({
+        name: "uploaded_abc123",
+        filename: "document",
+      })
+    ).toBe("document");
+  });
+});
+
 describe("allowed-file-types", () => {
   describe("text editor support", () => {
     test.each([
@@ -174,7 +271,7 @@ describe("allowed-file-types", () => {
 
     test("throws error for files without extension", () => {
       expect(() => validateFileName("filename")).toThrow(
-        'File type "filename" is not allowed'
+        "File must have an extension"
       );
       // Empty string results in no extension either
       expect(() => validateFileName("file.")).toThrow(
diff --git a/packages/sdk/src/assets.ts b/packages/sdk/src/assets.ts
index ce7ce8062deb..8b66bb1d5d87 100644
--- a/packages/sdk/src/assets.ts
+++ b/packages/sdk/src/assets.ts
@@ -21,6 +21,69 @@ export type AssetTextEditorLanguage =
   | "markdown"
   | "xml";
 
+// Assets created before display filenames were persisted must still derive their
+// basename from storage keys generated by Nano ID's historical 21-character format.
+const legacyNanoIdLength = 21;
+
+export const getFileExtension = (fileName: string): string | undefined => {
+  const extensionAt = fileName.lastIndexOf(".");
+  const separatorAt = Math.max(
+    fileName.lastIndexOf("/"),
+    fileName.lastIndexOf("\\")
+  );
+  if (extensionAt <= separatorAt + 1 || extensionAt === fileName.length - 1) {
+    return;
+  }
+  return fileName.slice(extensionAt + 1);
+};
+
+export const getFileNameParts = (fileName: string) => {
+  const extension = getFileExtension(fileName) ?? "";
+  const extensionLength = extension === "" ? 0 : extension.length + 1;
+  return {
+    basename: fileName.slice(0, fileName.length - extensionLength),
+    extension,
+  };
+};
+
+export type ParsedAssetName = {
+  basename: string;
+  hash: string;
+  ext: string;
+};
+
+export const parseAssetName = (assetName: string): ParsedAssetName => {
+  const { basename, extension: ext } = getFileNameParts(assetName);
+  let name = basename;
+
+  let hash = "";
+  let separatorAt = name.length - legacyNanoIdLength - 1;
+  if (separatorAt < 0 || name[separatorAt] !== "_") {
+    // Support older storage suffixes that predate the Nano ID format.
+    separatorAt = name.lastIndexOf("_");
+  }
+  if (separatorAt > -1) {
+    hash = name.slice(separatorAt + 1);
+    name = name.slice(0, separatorAt);
+  }
+  return { basename: name, hash, ext };
+};
+
+type AssetName = {
+  name: string;
+  filename?: string | null;
+};
+
+export const getAssetDisplayNameParts = (asset: AssetName) => {
+  const { basename, ext } = parseAssetName(asset.name);
+  return { basename: asset.filename ?? basename, ext };
+};
+
+export const formatAssetName = (asset: AssetName) => {
+  const { basename, ext } = getAssetDisplayNameParts(asset);
+  return `${basename}${ext === "" ? "" : `.${ext}`}`;
+};
+
 type MimeType = `${MimeCategory}/${string}`;
 type BinaryMimeType = `${Exclude<MimeCategory, "text">}/${string}`;
 
@@ -245,7 +308,7 @@ export const isTextFileAsset = (asset: Pick<Asset, "format">): boolean =>
  * Get MIME type from a filename
  */
 export const getMimeTypeByFilename = (fileName: string): string => {
-  const extension = fileName.split(".").pop()?.toLowerCase();
+  const extension = getFileExtension(fileName);
   if (!extension) {
     return "application/octet-stream";
   }
@@ -374,7 +437,7 @@ export const doesAssetMatchMimePatterns = (
   // try detecting the actual MIME type from the filename extension
   // This handles legacy assets that were incorrectly stored as type "file"
   if (asset.type === "file" && asset.name) {
-    const extension = asset.name.split(".").pop()?.toLowerCase();
+    const extension = getFileExtension(asset.name)?.toLowerCase();
     if (extension) {
       const mimeFromExtension = extensionToMime.get(`.${extension}`);
       if (mimeFromExtension) {
@@ -396,7 +459,7 @@ export const doesAssetMatchMimePatterns = (
 export const validateFileName = (
   fileName: string
 ): { extension: string; mimeType: string } => {
-  const extension = fileName.split(".").pop()?.toLowerCase();
+  const extension = getFileExtension(fileName)?.toLowerCase();
 
   if (!extension) {
     throw new Error("File must have an extension");
@@ -426,7 +489,7 @@ export const validateFileName = (
 export const detectAssetType = (
   fileName: string
 ): "image" | "font" | "video" | "file" => {
-  const ext = fileName.split(".").pop()?.toLowerCase();
+  const ext = getFileExtension(fileName)?.toLowerCase();
   if (!ext) {
     return "file";
   }