Calls to /actions return 400 Bad Request

Question

I'm trying to use jquery ( and/or VueJS with axios) to delete an asset from a frontend form (user is logged in and they have permissions to delete assets from this volume)

I have an HTML element that contains the fileID of the asset in question:

<div class="deleteAsset" :data-fileID="20031">Delete</div>

I have the following jQuery click action:

$('.deleteAsset').click(function() {
    window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName|e('js') }}";
    window.csrfTokenValue = "{{ craft.app.request.csrfToken|e('js') }}";

    var assetID = $(this).attr("data-fileID");
    var data = {};

    data[csrfTokenName] = csrfTokenValue;    
    data['assetId'] = assetID;
    data['dataType'] = 'json';
    data['action'] = '/actions/assets/delete-asset';

    $.post('/', data, function(response, textStatus, jqXHR) {
      console.log('clickResponse', response);
    });
});

However I keep getting the following error in the console when I click the "Delete" button:

POST https://website.com/ 404 (Not Found)

I have tried having the action URL in the $.post() call, but it has the same effect. Anyone have any suggestions?

Answer 1

You're close. Just a couple minor syntax things:

1. remove the colon (:) before :data-fileID
2. $.post has 4 parameters, the dataType (in this case 'json') goes as the last parameter.
3. Set the url parameter to the action.

This worked for me:

<div class="deleteAsset" data-fileID="20031">Delete</div>

<script>
  $('.deleteAsset').click(function() {
    window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName|e('js') }}";
    window.csrfTokenValue = "{{ craft.app.request.csrfToken|e('js') }}";

    var assetID = $(this).attr("data-fileID");
    var data = {};

    data[csrfTokenName] = csrfTokenValue;    
    data['assetId'] = assetID;

    $.post('/actions/assets/delete-asset', data, function(response, textStatus, jqXHR) {
      console.log('clickResponse', response);
    }, 'json');
  });
</script>