feat(farmer-activity): Add Support for photo upload

[OchiengPaul442]

Description

This commit introduces a new Photo-input component with the following features:

1. Photo Upload UI: A simple user interface with a button for photo upload has been created.
2. Capacitor Camera Integration: The @capacitor/camera package has been integrated and registered to provide camera support on native devices.
3. Web Photo Upload Support: A file input tag has been used to enable photo upload functionality on web platforms.
4. Temporary Photo-input Service: A temporary service has been created (just a simple template) to simulate the saving and retrieval of images. This will be replaced with actual storage setup in the future.
5. Photo Removal Options: Users have the option to remove a selected photo. If more than one photo is uploaded, an option to delete all photos is revealed.
6. Testing: Preliminary tests have been carried out on both web and native devices. Photo upload works fine on the web. However, the CameraSource.Prompt option, which is supposed to prompt the user to select either the photo album or take a photo on native devices, is not functioning as expected. Further investigation is needed to resolve this issue.

NOTE:
7. Upgrade Capacitor from Version 5 to 6: Successfully upgraded Capacitor from version 5 to 6, following the provided documentation. This upgrade enables the use of the @capacitor/camera on native devices. To verify the upgrade, execute yarn cap --version. Additionally, before running the application on a native platform, ensure to install the new modules compatible with the current version by running yarn install (might need to delete the node_modules folder for this). Due to issues running the sync command, I manually updated the different files as per the documentation for the app to run on a native device (Android).

Note: An attempt was made to create the component as an input component, but had issues with how to approach this after reading through the documentation. requesting further guidance on this.

Discussion

• This PR is resolving the issue feat(direct-to-farmer): add support for photo input #240
• This PR is resolving the issue Chore(core) - Update Capacitor to v6 #288

Preview

Link to app preview if relevant

Screenshots / Videos

Recording.2024-06-20.001114_2.mp4

[chrismclarke]

@OchiengPaul442
As mentioned in #269 - the combination of a draft PR and requesting review but without any supporting information/comments is very confusing - I don't know whether you want me to look at it or not.

I'm removing myself from review for now, when you think it is ready please tag me again. If you want me to review whilst still draft (e.g. you've faced a blocker that you want some assistance with) then just let me know that in the comments. Also when ready please include either a screenshot or demo video

[OchiengPaul442]

Hey @chrismclarke, apologies these tags confuse me sometimes and I forget when to change them. Won't happen again.

[OchiengPaul442]

Hi @chrismclarke,
I’m currently encountering some difficulties with the CameraSource.Prompt option on a native device. During my tests, I’ve noticed that the prompt doesn’t appear as expected and am not sure why.

[chrismclarke]

Testing on native device and getting permissions issues, I think because I had to install v5 of the plugin (current version of capacitor in use) but the latest docs are for v6 of the plugin which no longer need the permissions

capacitor v5 docs - https://capacitorjs.com/docs/v5/apis/camera
capacitor v6 docs - https://capacitorjs.com/docs/apis/camera

I think the best option will be to likely bump capacitor and all other plugins to v6 first. I've added #288 to outline - do you think you'd be able to take it on and then we try get this merged after?

If you want you could include the updates in this same PR just so we can test the full functionality with the camera api too.

Oh, also I noticed the .env.local file is currently committed but should be gitignored. I've updated the gitignore to delete the file, which will mean you need to manually recreate locally when syncing the changes from this branch. E.g.

apps\picsa-apps\extension-app-native.env.local

SERVER_URL=http://192.168.0.105:4200

(replacing with your own local ip address if different from above)

[OchiengPaul442]

Hey @chrismclarke, thank you. I will take on task #288, incorporate the suggestions and use this PR to implement the upgrades and conduct thorough testing.

[chrismclarke]

Thanks @OchiengPaul442

I tried running the latest update on native android device and found it was crashing due to incompatibility with the version of firebase-crashlytics used (always best to test on native device when making native-specific code updates). I was able to resolve with 00a33f1 and all seems to be working now.

I also tested the photo input you added and working well, thanks for considering both web and native handling of the feature. I did a minor refactor to make it standalone just to make it easier to later share as a common component, via 7912936

I appreciate there's no way to persist the data right now but we can address that in a follow-up issue to save this PR growing too large (plus it might need a bit of a discussion as potentially a little bit tricky) - as you also identified in the pr notes.

Otherwise definitely a nice step forward to have, I'd say good to merge here for now and we can review any follow-up issues after.

[chrismclarke]

@OchiengPaul442

I've added #291 to follow-up for photo storage if you are happy to take it on for next issue?