feat(web): search by filename

server/src/infra/infra.utils.ts

@@ -160,9 +160,19 @@ export function searchAssetBuilder(
     builder.andWhere(`${builder.alias}.ownerId IN (:...userIds)`, { userIds: options.userIds });
   }
 
-  const path = _.pick(options, ['encodedVideoPath', 'originalFileName', 'originalPath', 'resizePath', 'webpPath']);
+  const path = _.pick(options, ['encodedVideoPath', 'originalPath', 'resizePath', 'webpPath']);
   builder.andWhere(_.omitBy(path, _.isUndefined));
 
+  if (options.originalFileName) {
+    builder.andWhere(`${builder.alias}.originalFileName ILIKE :originalFileName`, {
+      originalFileName: `%${options.originalFileName}%`,
+    });
+
+    builder.orWhere(`${builder.alias}.originalPath ILIKE :originalFileName`, {
+      originalFileName: `%${options.originalFileName}%`,
+    });
+  }
+
   const status = _.pick(options, ['isExternal', 'isFavorite', 'isOffline', 'isReadOnly', 'isVisible', 'type']);
   const {
     isArchived,

web/src/lib/components/shared-components/search-bar/search-filter-box.svelte

@@ -11,6 +11,7 @@
 
   export type SearchFilter = {
     context?: string;
+    fileName?: string;
     personIds: Set<string>;
     location: SearchLocationFilter;
     camera: SearchCameraFilter;
@@ -32,6 +33,7 @@
   import SearchMediaSection from './search-media-section.svelte';
   import { parseUtcDate } from '$lib/utils/date-time';
   import SearchDisplaySection from './search-display-section.svelte';
+  import SearchTextSection from './search-text-section.svelte';
 
   export let searchQuery: MetadataSearchDto | SmartSearchDto;
 
@@ -41,6 +43,7 @@
 
   let filter: SearchFilter = {
     context: 'query' in searchQuery ? searchQuery.query : '',
+    fileName: 'originalFileName' in searchQuery ? searchQuery.originalFileName : undefined,
     personIds: new Set('personIds' in searchQuery ? searchQuery.personIds : []),
     location: {
       country: searchQuery.country,
@@ -91,6 +94,7 @@
 
     let payload: SmartSearchDto | MetadataSearchDto = {
       query: filter.context || undefined,
+      originalFileName: filter.fileName,
       country: filter.location.country,
       state: filter.location.state,
       city: filter.location.city,
@@ -124,20 +128,8 @@
       <!-- PEOPLE -->
       <SearchPeopleSection width={filterBoxWidth} bind:selectedPeople={filter.personIds} />
 
-      <!-- CONTEXT -->
-      <div>
-        <label class="immich-form-label" for="context">
-          <span>CONTEXT</span>
-          <input
-            class="immich-form-input hover:cursor-text w-full mt-1"
-            type="text"
-            id="context"
-            name="context"
-            placeholder="Sunrise on the beach"
-            bind:value={filter.context}
-          />
-        </label>
-      </div>
+      <!-- TEXT -->
+      <SearchTextSection bind:fileName={filter.fileName} bind:context={filter.context} />
 
       <!-- LOCATION -->
       <SearchLocationSection bind:filters={filter.location} />

web/src/lib/components/shared-components/search-bar/search-text-section.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  export let fileName: string | undefined;
+  export let context: string | undefined;
+
+  enum TextSearchOptions {
+    Context = 'context',
+    FileName = 'file-name',
+  }
+
+  let selectedOption = fileName ? TextSearchOptions.FileName : TextSearchOptions.Context;
+
+  $: {
+    if (selectedOption === TextSearchOptions.Context) {
+      fileName = undefined;
+    } else {
+      context = undefined;
+    }
+  }
+</script>
+
+<div class="flex gap-5">
+  <label class="immich-form-label" for="context">
+    <input type="radio" name="context" id="context" bind:group={selectedOption} value={TextSearchOptions.Context} />
+    <span>CONTEXT</span>
+  </label>
+
+  <label class="immich-form-label" for="file-name">
+    <input
+      type="radio"
+      name="file-name"
+      id="file-name"
+      bind:group={selectedOption}
+      value={TextSearchOptions.FileName}
+    />
+    <span>FILE NAME</span>
+  </label>
+</div>
+
+{#if selectedOption === TextSearchOptions.Context}
+  <input
+    class="immich-form-input hover:cursor-text w-full !mt-1"
+    type="text"
+    id="context"
+    name="context"
+    placeholder="Sunrise on the beach"
+    bind:value={context}
+  />
+{:else}
+  <input
+    class="immich-form-input hover:cursor-text w-full !mt-1"
+    type="text"
+    id="file-name"
+    name="file-name"
+    placeholder={'File name or extension i.e. IMG_1234.JPG or PNG'}
+    bind:value={fileName}
+  />
+{/if}

web/src/routes/(user)/search/+page.svelte

@@ -173,6 +173,7 @@
       make: 'Camera brand',
       model: 'Camera model',
       personIds: 'People',
+      originalFileName: 'File name',
     };
     return keyMap[key] || key;
   }