1

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>

1 Answer 1

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:

enter image description here

1
  • Thanks for getting back to me! Please see my edited question, not sure if it changes things at all Jan 8, 2023 at 3:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.