2

I created a user profile page with Matrix field with assets, I found this thread and this thread about adding and updating Matrix field in the frontend. Does anyone know how to delete the Matrix field? Moreover, I found that if I update Matrix field through the front end, it doesn't update the S3 bucket. Files are still stored in S3. Does anyone has a solution or give me a hint on delete/modify Matrix asset field? Thanks

1

3 Answers 3

2

I've managed to do this with:

<form method="post" accept-charset="UTF-8">
    {{ csrfInput() }}
    <input type="hidden" name="action" value="users/save-user">
    <input type="hidden" name="userId" value="{{ currentUser.id }}">
    {% include '_partial/wish-list-fields' %}

    <input type="hidden" name="fields[userWishListMatrix][{{ block.id }}][type]" value="null">

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

The wish-list-fields partial include hidden inputs showing all the fields already there. e.g.:

<input type="hidden" name="fields[userWishListMatrix][{{ block.id }}][fields][itemProperties][0][col1]" value="{{ row.property }}">

It repeats itself which I know doesn't seem terribly efficient but i dunno :-/ It works!

Please note, I'm on so things may be a little different (although most likely just the save-user / saveUser action).

1

You can just add each matrix row data inside a wrapper with an ID of matrix row:

<form id="some-custom-form" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
    {{ csrfInput() }}
    {{ redirectInput('/where-you-need') }}
    {{ actionInput('users/save-user') }}
    {{ hiddenInput('userId', currentUser.id) }}

    {% for block in currentUser.anyMatrixFieldName%}

here the wrapper with a matrix row id attribute:

<div id="{{ block.id}}">
        <input type="hidden" name="fields[anyMatrixFieldName][{{ block.id}}][type]" value="item">
        <input type="hidden" name="fields[anyMatrixFieldName][{{ block.id}}][enabled]" value="1">
        <input type="hidden" name="fields[anyMatrixFieldName][{{ block.id }}][fields][time][time]" value="{{ block.time|date('H:i') }}">
</div>

        <a href="#" class="matrix-remove" data-matrix="{{ block.id }}">Remove</a>
{% endfor %}
</form>

Then jQuery code which will remove matrix row and will submit the form:

    {% js at endBody %}
    $('.matrix-remove').click(function(event) {
      event.preventDefault();
      var matrixBlockId = '#' + $(this).attr('data-matrix');
      $(matrixBlockId).remove();
      $('#some-custom-form').submit();
    });
    {% endjs %}
0

Thanks to @ianp's answer, I was able to get the code below working.

This code deletes a single block entry from a matrix field through a front-end form. It's important to include the [sortOrder] array field in the form submission. This is how Craft knows which block entry to update/delete.

This Craft doc page is also very helpful when dealing with saving a front-end matrix field in general.

{% for block in currentUser.matrixFieldName.all() %}

 <form method="post" accept-charset="UTF-8">
  {{ csrfInput() }}
  {{ actionInput('users/save-user') }}
  {{ hiddenInput('userId', currentUser.id) }}
  {{ redirectInput("/account") }}
  {{ hiddenInput('fields[matrixFieldName][sortOrder][]', block.id) }}
  {{ hiddenInput('fields[matrixFieldName][block.id][type]', null) }}

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

{% endfor %}

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.