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?

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>