feat: upload assets to locked folder (#18806)

* feat: upload assets to locked folder

* chore: refactor params

web/src/lib/components/album-page/album-viewer.svelte

@@ -43,7 +43,7 @@
 
   dragAndDropFilesStore.subscribe((value) => {
     if (value.isDragging && value.files.length > 0) {
-      handlePromiseError(fileUploadHandler(value.files, album.id));
+      handlePromiseError(fileUploadHandler({ files: value.files, albumId: album.id }));
       dragAndDropFilesStore.set({ isDragging: false, files: [] });
     }
   });

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -52,7 +52,7 @@
       let results: (string | undefined)[] = [];
       results = await (!files || files.length === 0 || !Array.isArray(files)
         ? openFileUploadDialog()
-        : fileUploadHandler(files));
+        : fileUploadHandler({ files }));
       const data = await addSharedLinkAssets({
         id: sharedLink.id,
         assetIdsDto: {

web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte

@@ -4,12 +4,13 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { fileUploadHandler } from '$lib/utils/file-uploader';
-  import { isAlbumsRoute } from '$lib/utils/navigation';
+  import { isAlbumsRoute, isLockedFolderRoute } from '$lib/utils/navigation';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import ImmichLogo from './immich-logo.svelte';
 
   let albumId = $derived(isAlbumsRoute(page.route?.id) ? page.params.albumId : undefined);
+  let isInLockedFolder = $derived(isLockedFolderRoute(page.route.id));
 
   let dragStartTarget: EventTarget | null = $state(null);
 
@@ -126,7 +127,7 @@
     if (authManager.key) {
       dragAndDropFilesStore.set({ isDragging: true, files: filesArray });
     } else {
-      await fileUploadHandler(filesArray, albumId);
+      await fileUploadHandler({ files: filesArray, albumId, isLockedAssets: isInLockedFolder });
     }
   };
 

web/src/lib/components/shared-components/upload-asset-preview.svelte

@@ -32,7 +32,7 @@
 
   const handleRetry = async (uploadAsset: UploadAsset) => {
     uploadAssetsStore.removeItem(uploadAsset.id);
-    await fileUploadHandler([uploadAsset.file], uploadAsset.albumId);
+    await fileUploadHandler({ files: [uploadAsset.file], albumId: uploadAsset.albumId });
   };
 
   const asLink = (asset: UploadAsset) => {

web/src/lib/utils/file-uploader.ts

@@ -7,6 +7,7 @@ import { ExecutorQueue } from '$lib/utils/executor-queue';
 import {
   Action,
   AssetMediaStatus,
+  AssetVisibility,
   checkBulkUpload,
   getAssetOriginalPath,
   getBaseUrl,
@@ -73,7 +74,7 @@ export const openFileUploadDialog = async (options: FileUploadParam = {}) => {
         }
         const files = Array.from(target.files);
 
-        resolve(fileUploadHandler(files, albumId, assetId));
+        resolve(fileUploadHandler({ files, albumId, replaceAssetId: assetId }));
       });
 
       fileSelector.click();
@@ -84,11 +85,16 @@ export const openFileUploadDialog = async (options: FileUploadParam = {}) => {
   });
 };
 
-export const fileUploadHandler = async (
-  files: File[],
-  albumId?: string,
-  replaceAssetId?: string,
-): Promise<string[]> => {
+type FileUploadHandlerParams = Omit<FileUploaderParams, 'deviceAssetId' | 'assetFile'> & {
+  files: File[];
+};
+
+export const fileUploadHandler = async ({
+  files,
+  albumId,
+  replaceAssetId,
+  isLockedAssets = false,
+}: FileUploadHandlerParams): Promise<string[]> => {
   const extensions = await getExtensions();
   const promises = [];
   for (const file of files) {
@@ -96,7 +102,11 @@ export const fileUploadHandler = async (
     if (extensions.some((extension) => name.endsWith(extension))) {
       const deviceAssetId = getDeviceAssetId(file);
       uploadAssetsStore.addItem({ id: deviceAssetId, file, albumId });
-      promises.push(uploadExecutionQueue.addTask(() => fileUploader(file, deviceAssetId, albumId, replaceAssetId)));
+      promises.push(
+        uploadExecutionQueue.addTask(() =>
+          fileUploader({ assetFile: file, deviceAssetId, albumId, replaceAssetId, isLockedAssets }),
+        ),
+      );
     }
   }
 
@@ -108,13 +118,22 @@ function getDeviceAssetId(asset: File) {
   return 'web' + '-' + asset.name + '-' + asset.lastModified;
 }
 
+type FileUploaderParams = {
+  assetFile: File;
+  albumId?: string;
+  replaceAssetId?: string;
+  isLockedAssets?: boolean;
+  deviceAssetId: string;
+};
+
 // TODO: should probably use the @api SDK
-async function fileUploader(
-  assetFile: File,
-  deviceAssetId: string,
-  albumId?: string,
-  replaceAssetId?: string,
-): Promise<string | undefined> {
+async function fileUploader({
+  assetFile,
+  deviceAssetId,
+  albumId,
+  replaceAssetId,
+  isLockedAssets = false,
+}: FileUploaderParams): Promise<string | undefined> {
   const fileCreatedAt = new Date(assetFile.lastModified).toISOString();
   const $t = get(t);
 
@@ -134,6 +153,10 @@ async function fileUploader(
       formData.append(key, value);
     }
 
+    if (isLockedAssets) {
+      formData.append('visibility', AssetVisibility.Locked);
+    }
+
     let responseData: { id: string; status: AssetMediaStatus; isTrashed?: boolean } | undefined;
     const key = authManager.key;
     if (crypto?.subtle?.digest && !key) {

web/src/lib/utils/navigation.ts

@@ -17,6 +17,7 @@ export const isSharedLinkRoute = (route?: string | null) => !!route?.startsWith(
 export const isSearchRoute = (route?: string | null) => !!route?.startsWith('/(user)/search');
 export const isAlbumsRoute = (route?: string | null) => !!route?.startsWith('/(user)/albums/[albumId=id]');
 export const isPeopleRoute = (route?: string | null) => !!route?.startsWith('/(user)/people/[personId]');
+export const isLockedFolderRoute = (route?: string | null) => !!route?.startsWith('/(user)/locked');
 
 export const isAssetViewerRoute = (target?: NavigationTarget | null) =>
   !!(target?.route.id?.endsWith('/[[assetId=id]]') && 'assetId' in (target?.params || {}));