Answers.Body: <p>If anyone is looking for an alternative response, you can set the csrfvalidation to false for specific actions within controllers.</p>
  <p>Sample code for this solution can be found here on step two:
  <a href="https://delasign.com/blog/craft-cms-api/#step-two:-create-your-controllers" rel="nofollow noreferrer">https://delasign.com/blog/craft-cms-api/#step-two:-create-your-controllers</a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-12-20T00:26:41.827Z
Answers.LastActivityDate: 2022-12-20T00:26:41.827Z
Answers.UserDisplayName: odlh
Answers.Body: <p>You're close. Just a couple minor syntax things:</p>
  
  <ol>
  <li>remove the colon (<code>:</code>) before <code>:data-fileID</code></li>
  <li><a href="https://api.jquery.com/jquery.post/" rel="nofollow noreferrer"><code>$.post</code></a> has 4 parameters, the <code>dataType</code> (in this case 'json') goes as the last parameter.</li>
  <li>Set the <code>url</code> parameter to the action.</li>
  </ol>
  
  <p>This worked for me:</p>
  
  <pre><code>&lt;div class="deleteAsset" data-fileID="20031"&gt;Delete&lt;/div&gt;
  
  &lt;script&gt;
    $('.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');
    });
  &lt;/script&gt;
  
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-03T19:29:42.853Z
Answers.LastActivityDate: 2020-05-03T19:29:42.853Z
Answers.UserDisplayName: RitterKnight
Body: <p>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)</p>
  
  <p>I have an HTML element that contains the fileID of the asset in question:</p>
  
  <pre><code>&lt;div class="deleteAsset" :data-fileID="20031"&gt;Delete&lt;/div&gt;
  </code></pre>
  
  <p>I have the following jQuery click action:</p>
  
  <pre><code>$('.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);
      });
  });
  </code></pre>
  
  <p>However I keep getting the following error in the console when I click the "Delete" button:</p>
  
  <pre><code>POST https://website.com/ 404 (Not Found)
  </code></pre>
  
  <p>I have tried having the action URL in the $.post() call, but it has the same effect. 
  Anyone have any suggestions?</p>
  
Tags: <craft3><assets><post><delete>
Title: Calls to /actions return 400 Bad Request
ThreadText: # Calls to /actions return 400 Bad Request
  
  (Asked by: username_0 on 2020-05-01)
  
  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?
  
  **Tags:** craft3, assets, post, delete
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2022-12-20. Score: 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>
  
  
  ---
  
  ### Answer by username_2 on 2020-05-03. Score: 1
  
  You're close. Just a couple minor syntax things:
  
  1. remove the colon (`:`) before `:data-fileID`
  2. [`$.post`](https://api.jquery.com/jquery.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>
  
  ```
  
  
  ---
  
  