Front End Asset Management - Upload New Photos without Deleting/Overriding Existing

Question

I'm trying to create a front end system where users can create and manage listings with multiple photos. Everything saves as a draft until approved by an admin.

In the front end edit page, uploading multiple assets works and I'm able to display those assets to the user from their draft. However, when trying to upload additional assets, the existing ones are 'removed' and replaced by the new uploads.

I've tried just about everything I can think of and searched through a ton of documentation but haven't figured out how to make it work.

Here's what I have so far:

<form method="post" accept-charset="UTF-8" enctype="multipart/form-data">
    {{ getCsrfInput() }}
    <input type="hidden" name="action" value="entryRevisions/saveDraft">
    <input type="hidden" name="redirect" value="...">
    <input type="hidden" name="sectionId" value="...">
    {% if drafts %}
        <input type="hidden" name="draftId" value="{{ entry.draftId }}">
    {% endif %}
    <input type="hidden" name="entryId" value="...">
    <input type="hidden" name="enabled" value="1">

...

    {% if entry.photos|length %}
    {% for photo in entry.photos %}

Here is where I think something should be happening to save existing photos...

    {% endfor %}
    <input type="file" id="photos" name="fields[photos][]" class="upload" multiple>
    {% else %}
    <input type="file" id="photos" name="fields[photos][]" class="upload" multiple>
    {% endif %}


    <input type="submit" value="Publish">
</form>

I'd also like to be able to display the existing photos and give users the option to manually remove photos they've already uploaded, but that's step 2. Need to get past this point first. Any help or links to appropriate documentation would be much appreciated. Thanks!

Answer 1

You're right that your template needs some adjustments. Whenever you're saving an Assets field, you need to have all of the Asset id's not just the new ones. You're looking for something like

{% if entry.photos|length %}
    {% for photo in entry.photos %}
        <input type="hidden" name="fields[photos][]" value="{{ photo.id }}" />
    {% endfor %}
{% endif %}

<input type="file" id="photos" name="fields[photos][]" class="upload" multiple>