1

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?

2 Answers 2

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>

1

If anyone is looking for an alternative response, you can set the csrfvalidation to false for specific actions within controllers.

Sample code for this solution can be found here on step two: https://delasign.com/blog/craft-cms-api/#step-two:-create-your-controllers

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.