Lf 2200 allow the user to upload a custom image for the lf homepage background

[navDhammu]

Description

In the 'Farm info' form, an option to upload an image is added as well as to change or delete existing image. On successful form submission, image also appears on home page.

Jira link: https://lite-farm.atlassian.net/browse/LF-2200

Approach:

Initially, I attempted to follow a similar approach used for crop and document uploads (seperate from rest of the form, as discussed on slack) but ran into some issues with deleting the image that way. So I went with another approach where the image is sent along with rest of the form fields. Added benefit of this is that it reduces the amount of unnecessary images in storage in case users upload but don't submit.

Overview of changes:

• Changed request format for the putFarm request from application/json to multipart/form-data to allow the image file to be sent.
• Created a FarmImagePicker component that handles image selection with preview as well as drag and drop.
• Added middleware to handle image related actions that is responsible for creating thumbnail images, uploading both thumbnail and original images to s3, deleting existing images from s3 and passing control to the updateFarm controller.
• Tests: I'm still new to testing so wasn't sure how to add tests for image uploading but I considered using chatHttp's attach method to attach files as part of the tests, however this meant I would need to add some dummy images to the tests directory and I'm not sure if thats the correct approach.

For local testing, imaginary and minio services should be running and minio bucket should be set to public. In beta and production image requests will be sent to a cloudflare worker hosted at 'images.litefarm.workers.dev' that is responsible for authenticating the request and retrieving images from the private bucket.

Additional improvements to consider:

• Currently the file size isn't being restricted on either frontend or backend and it might be good to do so.
• We are using v2 of the aws-sdk but there is a newer version (v3) available.
• When clicking 'save', the button should probably show some type of loading state as there is a slight delay. Also, after submission the button should go back to original disabled state.
• When selecting images, it might be good to provide users with a reset option to discard any changes they made. For example, as a user if I already have a farm image and I accidentally click 'remove image' I should be able to undo it without having to refresh the page.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have added "MISSING" for all new language tags to languages I don't speak
• I have added the GNU General Public License to all new files

[navDhammu]

Wasn't sure where to put the image related middleware so I kept it under the main middleware directory for now.

[navDhammu]

Had to change this to typescript to avoid errors when using inside FarmImagePicker

[antsgar]

This is working great and it's so nice to see live! Thank you so much for this awesome contribution. I left a small comment, but other than that it looks good to go 🙂

[navDhammu]

This is working great and it's so nice to see live! Thank you so much for this awesome contribution. I left a small comment, but other than that it looks good to go 🙂

Good catch, I updated it and thanks for reviewing!