updates to web forms submission

[DanielJDufour]

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation
• 🧑‍💻 Refactor
• ✅ Test
• 🤖 Build or CI
• ❓ Other (please specify)

Related Issue

Improves web forms submission.

Describe this PR

• adds following to submission, start tim, end time, username, and email address
• adds support for image file upload via mutation observer

Screenshots

Alternative Approaches Considered

Considered adding this functionality to the getodk/web-forms fork, but I think that it would be more difficult to maintain (although that's debatable).

Review Guide

Notes for the reviewer. How to test this change?

• go mapper view
• click on a building
• click map in web forms
• fill out the form including uploading a picture
• click send
• go to manager view
• review submissions
• see that image name is displayed

Checklist before requesting a review

• 📖 Read the FMTM Contributing Guide: https://github.com/hotosm/fmtm/blob/main/CONTRIBUTING.md
• 📖 Read the HOT Code of Conduct: https://docs.hotosm.org/code-of-conduct
• 👷‍♀️ Create small PRs. In most cases, this will be possible.
• ✅ Provide tests for your changes.
• 📝 Use descriptive commit messages.
• 📗 Update any related documentation and include any relevant screenshots.

[optional] What gif best describes this PR or how it makes you feel?

[DanielJDufour]

I should caveat this by saying two things:

1. this functionality is still behind a feature flag ?webforms=true in the url, which I continue to recommend. The use of mutation observer, and the hacky workarounds feel brittle to me. We'll want to make sure that we are doing a hard lock on dependencies before moving to production.
2. I'm not sure the image upload is actually working. I'm adding the image file name between the <image></image> in the submission xml. I'm also successfully passing in the image binary through multipart form data body in the POST. FastAPI is finding this form data. Things are looking promising, but for some reason, fetching the image binary from ODKCentral doesn't appear to find the image.

getting http://api.fmtm.localhost:7050/submission/uuid:.../photos?project_id=1 will throw a 500 error or return an empty dictionary.

My hunch is that I need to update my .env file since the recent changes to S3 and file upload image management. Or I'm supposed to be passing something other than filename inside the tags in the submission xml. Any help would be appreciated!

[DanielJDufour]

I fixed the iframe rendering by setting stepperLayout to true and the iframe height to 100% instead of an absolute value.

[DanielJDufour]

[DanielJDufour]

I'm moving back to draft because I think the stepper layout might skip over the unsupported image upload node, which I overrode.

[spwoodcock]

I should caveat this by saying two things:

1. this functionality is still behind a feature flag ?webforms=true in the url, which I continue to recommend. The use of mutation observer, and the hacky workarounds feel brittle to me. We'll want to make sure that we are doing a hard lock on dependencies before moving to production.
2. I'm not sure the image upload is actually working. I'm adding the image file name between the <image></image> in the submission xml. I'm also successfully passing in the image binary through multipart form data body in the POST. FastAPI is finding this form data. Things are looking promising, but for some reason, fetching the image binary from ODKCentral doesn't appear to find the image.

getting http://api.fmtm.localhost:7050/submission/uuid:.../photos?project_id=1 will throw a 500 error or return an empty dictionary.

My hunch is that I need to update my .env file since the recent changes to S3 and file upload image management. Or I'm supposed to be passing something other than filename inside the tags in the submission xml. Any help would be appreciated!

You can download the images directly from the ODK Central UI as a test.

http://odk.fmtm.localhost:7050

Then login, go to the project, form, submissions table, then download all the data as a zip. You should see the images included hopefully.

You are right the FMTM 500 error is likely due due not having the S3 vars set

[DanielJDufour]

I got a fix to the stepper issue here: hotosm/web-forms#3. We can mark this ready for review, once that PR is merged.

[spwoodcock]

How's it going with this PR?

[DanielJDufour]

Looks like there's some merge conflicts in this PR. hotosm/web-forms#4

I'll resolve those and merge the web-forms PR to fmtm branch. We should then be ready for review here.