Prepopulating image fields - Formie Plugin on Craft 4

Question

I have a front end entry form for users to update their entry. It's built using the Formie plugin. I need the fields to prepopulate with the current entry content. According to the Formie docs fields can be populated like this:

{% do craft.formie.populateFormValues('editListing', { name: entry.title }) %}

This works well for text fields but I can't find any info on how to prepopulate a file upload field.

It looks like the image field expects a numeric value which could be the image id. I tried this:

{% do craft.formie.populateFormValues('editListing', { name: entry.title, mainImage: entry.mainImage.id }) %}

I think the above is on the right track but it caused some weird behaviour. The field still showed as 'no file chosen' but underneath it said '147 files uploaded.' followed by a bullet pointed list of 147 file names which I guess are probably from all of my entries.

Any idea how I can tweak my code to prepopulate the image field as expected?

EDIT

I was able (with some help) to create an field that prepopulated but I did it on an entry form that I created manually. Is there any way that what I have done here could be applied to my formie file upload fields?

   <div class="form-item-wrapper file-upload-field">
  <label for="artistsBioImage" class="field-label file-upload-label">Your headshot</label>
  {% if entry.artistsBioImage|length %}
    <img style="width: 300px" src="{{ entry.artistsBioImage.one().getUrl() }}" id="artistsBioImagePreview" class='file-upload-preview'>
  {% endif %}
  <input type="file" name="fields[artistsBioImage]" id="artistsBioImage" style="display: none;">
  <button type="button" id="artistsBioImageButton" class="file-upload-button">Replace image</button>

  <!-- Use JavaScript to update the value of the hidden file input field when the button is clicked -->
  <script>
    $('#artistsBioImageButton').click(function() {
      $('#artistsBioImage').click();
    });

    $('#artistsBioImage').change(function() {
      // Update the src attribute of the `img` tag
      $('#artistsBioImagePreview').attr('src', URL.createObjectURL(event.target.files[0]));

      // Update the text of the button
      $('#artistsBioImageButton').html(event.target.files[0].name);
    });
  </script>
  {{ _self.errorList(entry.getErrors('artistsBioImage')) }}
</div>

Answer 1

So firstly, you can't really populate a File Upload field, because Formie uses a <input type="file"> which according to the HTML spec, you cannot populate.

You can populate the field with existing assets, but it won't give you anything meaningful to edit, it'll just list the files that do exist (as you saw with the 147 files uploaded message).

{% set files = craft.assets.limit(1).ids() %}

{% do craft.formie.populateFormValues(form, { fileUpload: files }) %}

The above populates the field with [1354] (or similar) by just grabbing the ID of a single asset. This will then show something similar to: