feat: manual upload progress

i18n/en.json

@@ -2195,7 +2195,6 @@
   "updated_at": "Updated",
   "updated_password": "Updated password",
   "upload": "Upload",
-  "upload_action_prompt": "{count} queued for upload",
   "upload_concurrency": "Upload concurrency",
   "upload_details": "Upload Details",
   "upload_dialog_info": "Do you want to backup the selected Asset(s) to the server?",

mobile/lib/presentation/widgets/action_buttons/upload_action_button.widget.dart

@@ -1,9 +1,14 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/backup/asset_upload_progress.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
@@ -20,19 +25,38 @@ class UploadActionButton extends ConsumerWidget {
       return;
     }
 
-    final result = await ref.read(actionProvider.notifier).upload(source);
+    final isTimeline = source == ActionSource.timeline;
+    List<LocalAsset>? assets;
 
-    final successMessage = 'upload_action_prompt'.t(context: context, args: {'count': result.count.toString()});
+    if (source == ActionSource.timeline) {
+      assets = ref.read(multiSelectProvider).selectedAssets.whereType<LocalAsset>().toList();
+      if (assets.isEmpty) {
+        return;
+      }
+      ref.read(multiSelectProvider.notifier).reset();
+    } else {
+      unawaited(
+        showDialog(
+          context: context,
+          barrierDismissible: false,
+          builder: (dialogContext) => const _UploadProgressDialog(),
+        ),
+      );
+    }
 
-    if (context.mounted) {
+    final result = await ref.read(actionProvider.notifier).upload(source, assets: assets);
+
+    if (!isTimeline && context.mounted) {
+      Navigator.of(context, rootNavigator: true).pop();
+    }
+
+    if (context.mounted && !result.success) {
       ImmichToast.show(
         context: context,
-        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        msg: 'scaffold_body_error_occurred'.t(context: context),
         gravity: ToastGravity.BOTTOM,
-        toastType: result.success ? ToastType.success : ToastType.error,
+        toastType: ToastType.error,
       );
-
-      ref.read(multiSelectProvider.notifier).reset();
     }
   }
 
@@ -47,3 +71,42 @@ class UploadActionButton extends ConsumerWidget {
     );
   }
 }
+
+class _UploadProgressDialog extends ConsumerWidget {
+  const _UploadProgressDialog();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final progressMap = ref.watch(assetUploadProgressProvider);
+
+    // Calculate overall progress from all assets
+    final values = progressMap.values.where((v) => v >= 0).toList();
+    final progress = values.isEmpty ? 0.0 : values.reduce((a, b) => a + b) / values.length;
+    final hasError = progressMap.values.any((v) => v < 0);
+    final percentage = (progress * 100).toInt();
+
+    return AlertDialog(
+      title: Text('uploading'.t(context: context)),
+      content: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (hasError)
+            const Icon(Icons.error_outline, color: Colors.red, size: 48)
+          else
+            CircularProgressIndicator(value: progress > 0 ? progress : null),
+          const SizedBox(height: 16),
+          Text(hasError ? 'Error' : '$percentage%'),
+        ],
+      ),
+      actions: [
+        TextButton(
+          onPressed: () {
+            ref.read(manualUploadCancelTokenProvider)?.cancel();
+            Navigator.of(context).pop();
+          },
+          child: Text('cancel'.t(context: context)),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/presentation/widgets/images/thumbnail_tile.widget.dart

@@ -8,6 +8,7 @@ import 'package:immich_mobile/extensions/duration_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
+import 'package:immich_mobile/providers/backup/asset_upload_progress.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 
@@ -45,6 +46,10 @@ class ThumbnailTile extends ConsumerWidget {
     final bool storageIndicator =
         ref.watch(settingsProvider.select((s) => s.get(Setting.showStorageIndicator))) && showStorageIndicator;
 
+    final uploadProgress = asset is LocalAsset
+        ? ref.watch(assetUploadProgressProvider.select((map) => map[asset.id]))
+        : null;
+
     return Stack(
       children: [
         Container(color: lockSelection ? context.colorScheme.surfaceContainerHighest : assetContainerColor),
@@ -104,6 +109,7 @@ class ThumbnailTile extends ConsumerWidget {
                       child: _TileOverlayIcon(Icons.favorite_rounded),
                     ),
                   ),
+                if (uploadProgress != null) _UploadProgressOverlay(progress: uploadProgress),
               ],
             ),
           ),
@@ -229,3 +235,46 @@ class _AssetTypeIcons extends StatelessWidget {
     );
   }
 }
+
+class _UploadProgressOverlay extends StatelessWidget {
+  final double progress;
+
+  const _UploadProgressOverlay({required this.progress});
+
+  @override
+  Widget build(BuildContext context) {
+    final isError = progress < 0;
+    final percentage = isError ? 0 : (progress * 100).toInt();
+
+    return Positioned.fill(
+      child: Container(
+        color: isError ? Colors.red.withValues(alpha: 0.6) : Colors.black54,
+        child: Center(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              if (isError)
+                const Icon(Icons.error_outline, color: Colors.white, size: 36)
+              else
+                SizedBox(
+                  width: 36,
+                  height: 36,
+                  child: CircularProgressIndicator(
+                    value: progress,
+                    strokeWidth: 3,
+                    backgroundColor: Colors.white24,
+                    valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
+                  ),
+                ),
+              const SizedBox(height: 4),
+              Text(
+                isError ? 'Error' : '$percentage%',
+                style: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/providers/backup/asset_upload_progress.provider.dart

@@ -0,0 +1,33 @@
+import 'package:cancellation_token_http/http.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+/// Tracks per-asset upload progress.
+/// Key: local asset ID, Value: upload progress 0.0 to 1.0, or -1.0 for error
+class AssetUploadProgressNotifier extends Notifier<Map<String, double>> {
+  static const double errorValue = -1.0;
+
+  @override
+  Map<String, double> build() => {};
+
+  void setProgress(String localAssetId, double progress) {
+    state = {...state, localAssetId: progress};
+  }
+
+  void setError(String localAssetId) {
+    state = {...state, localAssetId: errorValue};
+  }
+
+  void remove(String localAssetId) {
+    state = Map.from(state)..remove(localAssetId);
+  }
+
+  void clear() {
+    state = {};
+  }
+}
+
+final assetUploadProgressProvider = NotifierProvider<AssetUploadProgressNotifier, Map<String, double>>(
+  AssetUploadProgressNotifier.new,
+);
+
+final manualUploadCancelTokenProvider = StateProvider<CancellationToken?>((ref) => null);

mobile/lib/providers/infrastructure/action.provider.dart

@@ -14,6 +14,7 @@ import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asse
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/providers/backup/asset_upload_progress.provider.dart';
 import 'package:immich_mobile/services/action.service.dart';
 import 'package:immich_mobile/services/download.service.dart';
 import 'package:immich_mobile/services/timeline.service.dart';
@@ -412,14 +413,42 @@ class ActionNotifier extends Notifier<void> {
     }
   }
 
-  Future<ActionResult> upload(ActionSource source) async {
-    final assets = _getAssets(source).whereType<LocalAsset>().toList();
+  Future<ActionResult> upload(ActionSource source, {List<LocalAsset>? assets}) async {
+    final assetsToUpload = assets ?? _getAssets(source).whereType<LocalAsset>().toList();
+
+    final progressNotifier = ref.read(assetUploadProgressProvider.notifier);
+    final cancelToken = CancellationToken();
+    ref.read(manualUploadCancelTokenProvider.notifier).state = cancelToken;
+
+    // Initialize progress for all assets
+    for (final asset in assetsToUpload) {
+      progressNotifier.setProgress(asset.id, 0.0);
+    }
+
     try {
-      await _uploadService.manualBackup(assets, CancellationToken());
-      return ActionResult(count: assets.length, success: true);
+      await _uploadService.manualBackup(
+        assetsToUpload,
+        cancelToken,
+        onProgress: (localAssetId, filename, bytes, totalBytes) {
+          final progress = totalBytes > 0 ? bytes / totalBytes : 0.0;
+          progressNotifier.setProgress(localAssetId, progress);
+        },
+        onSuccess: (localAssetId, remoteAssetId) {
+          progressNotifier.remove(localAssetId);
+        },
+        onError: (localAssetId, errorMessage) {
+          progressNotifier.setError(localAssetId);
+        },
+      );
+      return ActionResult(count: assetsToUpload.length, success: true);
     } catch (error, stack) {
       _logger.severe('Failed manually upload assets', error, stack);
-      return ActionResult(count: assets.length, success: false, error: error.toString());
+      return ActionResult(count: assetsToUpload.length, success: false, error: error.toString());
+    } finally {
+      ref.read(manualUploadCancelTokenProvider.notifier).state = null;
+      Future.delayed(const Duration(seconds: 2), () {
+        progressNotifier.clear();
+      });
     }
   }
 }