f0cf3311d5
* init * fix * styling * temporary workaround for 500 error **Root cause:** The autogenerated Dart OpenAPI client (`UsersApi.createProfileImage()`) had two issues: 1. It set `Content-Type: multipart/form-data` without a boundary, which overrode the correct header that Dart's `MultipartRequest` would set (`multipart/form-data; boundary=...`). 2. It added the file to both `mp.fields` and `mp.files`, creating a duplicate text field. **Result:** Multer on the server failed to parse the multipart body, so `@UploadedFile()` was `undefined` → accessing `file.path` in `UserService.createProfileImage()` threw → **500 Internal Server Error**. **Workaround:** Bypass the autogenerated method in `UserApiRepository.createProfileImage()` and send the multipart request directly using the same `ApiClient` (basePath + auth), ensuring: - No manual `Content-Type` header (let `MultipartRequest` set it with boundary) - File only in `mp.files`, not `mp.fields` - Proper filename fallback * Revert "temporary workaround for 500 error" This reverts commit 8436cd402632ca7be9272a1c72fdaf0763dcefb6. * generate route for ProfilePictureCropPage * add route import * simplify * try this * Revert "try this" This reverts commit fcf37d2801055c49010ddb4fd271feb900ee645a. * try patching * Reapply "temporary workaround for 500 error" This reverts commit faeed810c21e4c9f0839dfff1f34aa6183469e56. * Revert "Reapply "temporary workaround for 500 error"" This reverts commit a14a0b76d14975af98ef91748576a79cef959635. * fix upload * Refactor image conversion logic by introducing a new utility function. Replace inline image-to-Uint8List conversion with the new utility in EditImagePage, DriftEditImagePage, and ProfilePictureCropPage. * use toast over snack * format * Revert "try patching" This reverts commit 68a616522a1eee88c4a9755a314c0017e6450c0f. * Enhance toast notification in ProfilePictureCropPage to include success type for better user feedback. * Revert "simplify" This reverts commit 8e85057a40678c25bfffa8578ddcc8fd7d1e143e. * format * add tests * refactor to use statefulwidget * format --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
Immich Mobile Application - Flutter
The Immich mobile app is a Flutter-based solution leveraging the Isar Database for local storage and Riverpod for state management. This structure optimizes functionality and maintainability, allowing for efficient development and robust performance.
Setup
- Install mise.
- Change to the immich directory and trust the mise config with
mise trust. - Install tools with mise:
mise install. - Run
flutter pub getto install the dependencies. - Run
make translationto generate the translation file. - Run
flutter runto start the app.
Translation
To add a new translation text, enter the key-value pair in the i18n/en.json in the root of the immich project. Then, from the mobile/ directory, run
make translation
Static Analysis
The following checks of static analysis must pass for a contribution to the mobile app to be valid:
dart format lib
dart analyze
dart run custom_lint
dcm analyze lib
DCM is a vendor tool that needs to be downloaded manually to run locally.
Immich was provided an open source license.
To use it, it is important that you do not have an active free tier license (can be verified with dcm license).
If you have write-access to the Immich repository directly, running dcm in your clone should just work.
If you are working on a clone of a fork, you need to connect to the main Immich repository as remote first:
git remote add immich git@github.com:immich-app/immich.git
Immich-Flutter Directory Structure
Below are the directory inside the lib directory:
-
constants: Store essential constants utilized across the application, like colors and locale. -
extensions: Extensions enhancing various existing functionalities within the app, such as asset_extensions.dart, string_extensions.dart, and more. -
module_template: Provides a template structure for different modules within the app, including subdivisions like models, providers, services, UI, and views.models: Placeholder for storing module-specific models.providers: Section to define module-specific Riverpod providers.services: Houses services tailored to the module's functionality.ui: Contains UI components and widgets for the module.views: Placeholder for module-specific views.
-
modules: Organizes different functional modules of the app, each containing subdivisions for models, providers, services, UI, and views. This structure promotes modular development and scalability. -
routing: Includes guards like auth_guard.dart, backup_permission_guard.dart, and routers like router.dart and router.gr.dart for streamlined navigation and permission management. -
shared: cache, models, providers, services, ui, views: Encapsulates shared functionalities, such as caching mechanisms, common models, providers, services, UI components, and views accessible across the application. -
utils: A collection of utility classes and functions catering to different app functionalities, including async_mutex.dart, bytes_units.dart, debounce.dart, migration.dart, and more.
Immich Architectural Pattern
The Immich Flutter app embraces a well-defined architectural pattern inspired by the Model-View-ViewModel (MVVM) approach. This layout organizes modules for models, providers, services, UI, and views, creating a modular development approach that strongly emphasizes a clean separation of concerns.
Please use the module_template provided to create a new module.
Architecture Breakdown
Below is how your code needs to be structured:
-
Models: In Immich, Models are like the app's blueprint—they're essential for organizing and using information. Imagine them as containers that hold data the app needs to function. They also handle basic rules and logic for managing and interacting with this data across the app.
-
Providers (Riverpod): Providers in Immich are a bit like traffic managers. They help different parts of the app communicate and share information effectively. They ensure that the right data gets to the right places at the right time. These providers use Riverpod, a tool that helps with managing and organizing how the app's information flows. Everything related to the state goes here.
-
Services: Services are the helpful behind-the-scenes workers in Immich. They handle important tasks like handling network requests or managing other essential functions. These services work independently and focus on supporting the app's main functionalities.
-
UI: In Immich, the UI focuses solely on how things appear and feel without worrying about the app's complex inner workings. You can slot in your reusable widget here.
-
Views: Views use Providers to get the needed information and handle actions without dealing with the technical complexities behind the scenes. Normally Flutter's screen & pages goes here.
Contributing
Please refer to the architecture for contributing to the mobile app!