Uploading and displaying images in contact forms

Hi guys, I am fairly new to the forum, so I apologize if my question is a lacking in the necessary details or doesn’t follow a standard format. Recently in an implementation we are running in Nepal, we were requested to add a picture in the person contact form. We have attempted and successfully managed to use images in app forms before and tried the same thing in the person_create contact form, which did not work as expected.

So the crux of the issue can be explained as a two-parter.

First off is the couchdb document when saving the contact. It does not have the _attachment field like the form data which you can see in the images below (App form document is on the left with _attachments and Contact form is on the right).

Both of the forms have used the type image in the the form and have no difference among them in terms of configurations and such. Both documents have the image names in the appropriate fields the _attachments field is the only difference.

Secondly, when I inspect the page and look into the image loaded in the report, it loads the image as a blob and does not directly reference the image file. Where does CHT store the images uploaded via forms? I was hoping I could directly reference the file location in the contact-summary.templated.js file and make it work that way but that does not seem to be an option.

TLDR; Trying to add image upload to person_create contact form is not working but the same thing works in app forms. How can images be uploaded to contacts so that they can be displayed in contact cards?

1 Like

Welcome to the CHT community @gkesh.

There was a similar request before.

The answer was:

I think it’s still not supported.

2 Likes

The image uploaded via app form is stored in CouchDB and can be assessed from here:

1 Like

Thank you for your response @binod sir, if there are no alternatives, I guess we might need to rethink how we approach this issue. I will follow the forum for any updates on this feature.

Hi @diana and @binod, did we get an alternative approach for uploading photos and pdf files to contact forms? @iesmail would like to test this.

It has been a long time, but I am not aware of any changes made to this functionality.

:thinking: Maybe I am missing something here, but the basic functionality of being able to include media in a form should work fine for contact forms. I agree with Binod that I don’t think we have done any work targeted specifically at fixing this, but have have had several significant Enketo uplifts that perhaps inadvertently address this…

I just did a quick test with the default person-create form and a CHT instance running 5.0:

  1. Add image file to forms/contact/person-create-media/images/croc.png
  2. Update the person-create.xlsx to reference the image:
type name label::en image::en
string name Full name croc.png
  1. Convert/upload the form cht --url... convert-contact-forms upload-contact-forms -- person-create

After that, the image was showing in my contact form as expected:

In this case, the goal is to let the user upload a picture when filling a contact form and show it along with the contact’s profile.

For app forms, it works by adding an image type:

type name label
image my_photo Image widget

Example: photo-upload.xml

The picture uploaded by this method can be seen from the “Reports” tab.
It is stored as an attachment of the report document.

Adding the image type in a contact form also asks you to upload a picture. However, that picture is not visible anywhere. It is not there in the attachments either.

Ahhh thanks Binod! :person_facepalming: I misunderstood the “upload” part… Got it.

I have created an issue for this: Support uploading attachments in `contact` forms · Issue #10509 · medic/cht-core · GitHub

Please feel free to add anything I missed to that issue.

1 Like

@Diana,

I tested the file upload functionality in the clinic-create form and found the following issues:

  1. The contact profile for the head of household displays empty data, and the corresponding CouchDB document cannot be found in CouchDB.

  2. For the other household member, the contact profile shows the uploaded image name, but there is no attachment present in the CouchDB document.

Hello @iesmail

Uploading files is only available for the main document. In this case, in your clinic create form, the upload would be attached to your clinic, and not the person. To upload a photo for the person, this needs to be done in the person-create or person-edit forms.

This is detailed in the documentation here: contact – Community Health Toolkit

Hi @diana, this makes sense technically, but it highlights a real workflow challenge worth raising. In our context, CHWs often register households with 10 or more members at once. Following the suggested approach would mean the CHW completes the household registration, then has to go back and open a person-edit form individually for each member just to capture their photo. Essentially repeating the same step 10+ times for a single household visit.

In practice, this kind of repetitive workflow might result in CHWs skipping photo capture altogether, which defeats the purpose of the feature.

Is there any planned support for capturing attachments for sub-contacts directly within a parent form such as clinic-create? This would allow photo capture at the point of registration as part of a single uninterrupted workflow, and if this is not currently supported we would like to request it as a feature.

Hi @iesmail

Please feel free to open a feature request to add the ability to add attachments for sub-documents.
I want to mention that this is technically complex and elaborate, and would need to be applied to reports attachments as well. The additional added complexity was the reason we did not pursue this in the initial work, and also because this was not described as a requirement, neither in the original description or in the course of developing the feature. This discussion was brought up several times, was discussed on the issue and the PR and was agreed to be dropped in the initial iteration.