Re-submission on replicator pictures make them disappeared

[maxwkfcc]

Description

With the previous update on allowing submission of replicator pictures, the pictures can be submitted.

However, when I try to edit the record without editing that replicator pictures field and do a submission again, pictures disappeared.

Steps to reproduce

1. Create a page with pictures upload inside a replicator
2. Save the record
3. Edit the record and save without changing anythings
4. Pictures inside replicator disappeared.

Environment

Statamic 3.3.51 Pro
Laravel 8.83.23
PHP 8.1.13
cc/guest-entries-support dev-main
doublethreedigital/guest-entries 2.0.1
jonassiewertsen/statamic-live-search 1.5.1
jonassiewertsen/statamic-livewire 2.9.0
mitydigital/sitemapamic 2.3.3
statamic/eloquent-driver 0.3.0
swiftmade/statamic-clear-assets 1.1.0
takepart-media/statamic-oreos 1.2.0

[duncanmcclean]

Sorry for taking ages to get back to you regarding this issue!

Does the same issue happen when you have the Assets field outside a Replicator or does it only happen when the Assets field is inside a Replicator?

I don't suppose you'd be able to put together a quick example repository (or give me access to your site) that I can test with?

[maxwkfcc]

Hi Duncan,

It is not happening outside a Replicator. I cannot create such a repository but I spotted where it might goes wrong.

Inside the GuestEntryController.php, the function processField. It takes the replicator intake values to loop through and process to return an array value to the replicator. Since there is no intake value for the pictures, the return array does not include a key for the pictures and returned back to the replicator. That's why the program think that the entry need to unlink from old pictures.

Does this make sense to you?

Thanks a lot
Max

[duncanmcclean]

Inside the GuestEntryController.php, the function processField. It takes the replicator intake values to loop through and process to return an array value to the replicator. Since there is no intake value for the pictures, the return array does not include a key for the pictures and returned back to the replicator. That's why the program think that the entry need to unlink from old pictures.

I think it does, yeah. In theory, it should be doing the same thing for the 'nested' fields in the Replicator as it does if they were on the 'root' of the entry.

I'm struggling to picture how I can reproduce this issue though (apologies!). Would you be able to attach the code for your create form and your update form and I can take a look - even if it's a stripped down version with just asset uploads?

If you can, I'll try and take a look at some point over the next few days.

[maxwkfcc]

Inside the GuestEntryController.php, the function processField. It takes the replicator intake values to loop through and process to return an array value to the replicator. Since there is no intake value for the pictures, the return array does not include a key for the pictures and returned back to the replicator. That's why the program think that the entry need to unlink from old pictures.

I think it does, yeah. In theory, it should be doing the same thing for the 'nested' fields in the Replicator as it does if they were on the 'root' of the entry.

I'm struggling to picture how I can reproduce this issue though (apologies!). Would you be able to attach the code for your create form and your update form and I can take a look - even if it's a stripped down version with just asset uploads?

If you can, I'll try and take a look at some point over the next few days.

Hi Duncan,

Happy to have your reply. I have tried to record a video, debug screen capture and the form's html code for you. Please see the links below the message.

The replicator field is: rich_text_and_image and there is a gallery rich_text_and_image.0.gallery field under it
There is a normal gallery field: gallery

The form initially (submitted once already) attached with pictures for both rich_text_and_image.0.gallery and the gallery field. While I try to re-submit, it stop just after the data retrieval and you can see that both of the fields contains pictures. But, after process field, you can see the rich_text_and_image.0.gallery is gone but the pictures for gallery it is still there.

Hope this is clear enough to explain

Thanks
Max

Video: https://annesleygandoncouk-my.sharepoint.com/:v:/g/personal/max_cambridgecreative_co/EQPQPnVwi7ZCjyBRs2tqw8YB7NQdbYH5GEzO7mywpLySFg?e=GmjZdI

Debug Capture: https://annesleygandoncouk-my.sharepoint.com/:w:/g/personal/max_cambridgecreative_co/EaLnWOzrlDJKupGEvFyKWGkBlCo5QXKTIunyOJMIkLuf-g?e=PGQkbV

Html: https://annesleygandoncouk-my.sharepoint.com/:w:/g/personal/max_cambridgecreative_co/EbVg_92Ex-hHrG2YBU33WUYB5p2jifEBqluZegMborduLw?e=nCiGrg

[duncanmcclean]

Thanks! I'll take a look at these bits when I can.

[duncanmcclean]

Thanks, I understand the issue now. Just need to reproduce it...

Would you also be able to provide the Antlers code for the edit template? It's incredibly difficult for me to reproduce with just the HTML output & without access to a repo where I can easily see the issue.

[maxwkfcc]

Hi Duncan,

Thanks for the follow-up. Here attached with the antler code (only for the necessary parts). Feel free to let me know if that is not enough for your reproduction.

<!-- GALLERY -->
<div class="row gallery-row">
    <div class="col-12">
        {{ partial:atoms/forms/form-label for="gallery" :label="gallery_label" }}
    </div>

    <div class="col-12 col-md-12 col-lg-12">
        <input class="form-control" type="file" name="gallery[]" multiple />
        
        {{ entry:gallery }}
        <div id="pic-{{ entry:id }}-{{ id }}" style="border: 1px solid Coral">
            <img width='200px' src='{{ url }}' />
                
            <button type="button" class="remove-picture" data-field="gallery" data-id="{{ entry:id }}" data-asset="{{ id }}" data-csrf="{{ csrf_token }}">Remove {{ title }}</button>
        </div>
        {{ /entry:gallery }}
    </div>
    <div class="col-12">
        {{ get_errors:gallery }}
            {{ partial:atoms/forms/validation-error }}
        {{ /get_errors:gallery }}
    </div>
</div>

<-- Rich Text and Image - Gallery -->
<div style="border: 2px solid grey; padding: 10px;">
    <h1>{{ rich_text_and_image_label }}</h1>
    <div class="row content-row">
        <div class="col-12">
            {{ partial:atoms/forms/form-label for="content" :label="content_label" }}
        </div>
        <div class="col-12 col-md-6">
            {{ partial:atoms/forms/form-label for="rich_text_and_image[0][gallery]" :label="rti_gallery_label" }}
            <input class="form-control" type="file" name="rich_text_and_image[0][gallery][]" multiple />
            {{ entry:rich_text_and_image:0:gallery }}
            <div id="pic-{{ entry:id }}-{{ id }}" style="border: 1px solid OliveDrab">
                <img width='200px' src='{{ url }}' />
                   
                <button type="button" class="remove-picture" data-field="rich_text_and_image.0.gallery" data-id="{{ entry:id }}" data-asset="{{ id }}" data-csrf="{{ csrf_token }}">Remove {{ title }}</button>
            </div>
            {{ /entry:rich_text_and_image:0:gallery }}

            {{ get_errors:rich_text_and_image.0.gallery }}
                {{ partial:atoms/forms/validation-error }}
            {{ /get_errors:rich_text_and_image.0.gallery }}
        </div>
    </div>
</div>

Thanks
Max

[duncanmcclean]

Sorry, I'm still struggling to reproduce this.

Please can you create a test repository with all I need in order to reproduce the issue? It's really difficult trying to paste in half of a form with none of the context around it and making it work.

Once I can reproduce it, I can finally work on fixing the issue for you.

[maxwkfcc]

Hi Duncan,

I have sent you the download link for the source code shared with you on discord. It would be appreciate if you can keep it confidential as it is trimmed from our live project source code.

Since I have put the data into database, you can find the database.sql.gz inside the folder. Please load it into your database and make configuration in .env to connect to it.

You need to run composer install and npm i && npm run dev before starting the project.

You may need to config the .env for the site url.

I have created an account for you since the test requires a user login.
username: [email protected]
password: abcd1234

The form to be tested is /seller-parks-form. The html in /resources/views/partials/seller/parks/fields.antlers.html

Please let me know if you have any problems in setting up.

Thanks
Max

[duncanmcclean]

Thanks - I'll take a look after work.

[maxwkfcc]

Hi Duncan,

Forgot to mention. I have extended your Controller in addons/cc/guest-entries-support/src/Http/Controllers/GuestEntrySupportController.php and pointing to there by action in file resources/views/partials/seller/parks/update.antlers.html.

Just in case you found something out of your expectation. I have just added a function after your processField to do adding up images.

Thanks

[duncanmcclean]

Thanks for giving me access to the project - I'm now able to see the issue.

I'll try and carve out some time soon to dig into it again and see if I can develop a fix for you.

[duncanmcclean]

Hey!

I think I may have been able to figure out a fix for you... sorry it's taken so long!

1. Update to Guest Entries v2.1.1
2. Inside your loop (the {{ entry:rich_text_and_image:0:gallery }} one), add this line:

<input type="hidden" name="rich_text_and_image[0][gallery][]" value="{{ path }}">

3. Try again - hopefully it'll work for you, it has for me!

[maxwkf]

Hey!

I think I may have been able to figure out a fix for you... sorry it's taken so long!

1. Update to Guest Entries v2.1.1
2. Inside your loop (the {{ entry:rich_text_and_image:0:gallery }} one), add this line:

<input type="hidden" name="rich_text_and_image[0][gallery][]" value="{{ path }}">

3. Try again - hopefully it'll work for you, it has for me!

Hi Duncan,

Brilliant! It works perfectly. Thanks a lot.