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
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 craft3 so things may be a little different (although most likely just the save-user
/ saveUser
action).
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 %}