Answers.Body: <p>So firstly, you can't really populate a File Upload field, because Formie uses a <code>&lt;input type=&quot;file&quot;&gt;</code> which according to the HTML spec, you cannot populate.</p>
  <p>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 <em>do</em> exist (as you saw with the <code>147 files uploaded</code> message).</p>
  <pre><code>{% set files = craft.assets.limit(1).ids() %}
  
  {% do craft.formie.populateFormValues(form, { fileUpload: files }) %}
  </code></pre>
  <p>The above populates the field with <code>[1354]</code> (or similar) by just grabbing the ID of a single asset. This will then show something similar to:</p>
  <p><a href="https://i.sstatic.net/ORONl.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ORONl.png" alt="enter image description here" /></a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-01-08T03:03:32.363Z
Answers.Text: Thanks for getting back to me! Please see my edited question, not sure if it changes things at all
Answers.UserDisplayName: George Bleasdale
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-01-07T21:28:55.343Z
Answers.LastActivityDate: 2023-01-07T21:28:55.343Z
Answers.UserDisplayName: crawf
Body: <p>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:</p>
  <pre><code>{% do craft.formie.populateFormValues('editListing', { name: entry.title }) %}
  </code></pre>
  <p>This works well for text fields but I can't find any info on how to prepopulate a file upload field.</p>
  <p>It looks like the image field expects a numeric value which could be the image id. I tried this:</p>
  <pre><code>{% do craft.formie.populateFormValues('editListing', { name: entry.title, mainImage: entry.mainImage.id }) %}
  </code></pre>
  <p>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.</p>
  <p>Any idea how I can tweak my code to prepopulate the image field as expected?</p>
  <p><strong>EDIT</strong></p>
  <p>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?</p>
  <pre><code>   &lt;div class=&quot;form-item-wrapper file-upload-field&quot;&gt;
    &lt;label for=&quot;artistsBioImage&quot; class=&quot;field-label file-upload-label&quot;&gt;Your headshot&lt;/label&gt;
    {% if entry.artistsBioImage|length %}
      &lt;img style=&quot;width: 300px&quot; src=&quot;{{ entry.artistsBioImage.one().getUrl() }}&quot; id=&quot;artistsBioImagePreview&quot; class='file-upload-preview'&gt;
    {% endif %}
    &lt;input type=&quot;file&quot; name=&quot;fields[artistsBioImage]&quot; id=&quot;artistsBioImage&quot; style=&quot;display: none;&quot;&gt;
    &lt;button type=&quot;button&quot; id=&quot;artistsBioImageButton&quot; class=&quot;file-upload-button&quot;&gt;Replace image&lt;/button&gt;
  
    &lt;!-- Use JavaScript to update the value of the hidden file input field when the button is clicked --&gt;
    &lt;script&gt;
      $('#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);
      });
    &lt;/script&gt;
    {{ _self.errorList(entry.getErrors('artistsBioImage')) }}
  &lt;/div&gt;
  </code></pre>
  
Tags: <assets><form><craft4><frontend><plugin-formie>
Title: Prepopulating image fields - Formie Plugin on Craft 4
ThreadText: # Prepopulating image fields - Formie Plugin on Craft 4
  
  (Asked by: username_0 on 2023-01-07)
  
  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>
  
  ```
  
  **Tags:** assets, form, craft4, frontend, plugin-formie
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2023-01-07. Score: 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](https://i.sstatic.net/ORONl.png)](https://i.sstatic.net/ORONl.png)
  
  > **Comments:**
  > **username_0**: Thanks for getting back to me! Please see my edited question, not sure if it changes things at all  
  
  ---
  
  