Answers.Body: <p>I test using this code and working.
  For uploading there are few thing that needed:</p>
  <ol>
  <li>user must login and have access to upload to certain volume.</li>
  <li>The form must have csrf.</li>
  <li>It require to use json as content type.</li>
  </ol>
  
  <pre><code>{{ csrfInput() }}
  {{ actionInput('assets/upload') }}
  {{ hiddenInput('folderId', 1) }}
  
  &lt;input name=&quot;assets-upload&quot; type='file'&gt;
  &lt;input type=&quot;button&quot; value=&quot;Upload Image&quot; onclick=&quot;uploadImage()&quot;&gt;
  </code></pre>
  
  <pre><code>&lt;script&gt;
      function uploadImage() {
          var formData = new FormData($(&quot;#imageUploadForm&quot;)[0]);
  
          $.ajax({
              type: &quot;POST&quot;, // Replace with your server-side script
              data: formData,
              dataType: 'json',
              contentType: false,
              processData: false,
              success: function(response) {
                  $(&quot;#result&quot;).html(response);
              },
              error: function() {
                  $(&quot;#result&quot;).html(&quot;Error uploading image.&quot;);
              }
          });
      }
  &lt;/script&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-01-22T10:18:35.937Z
Answers.Text: Thanks so much, it works
Answers.UserDisplayName: Branko
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-01-18T08:25:46.363Z
Answers.LastActivityDate: 2024-01-18T08:25:46.363Z
Answers.UserDisplayName: aodihis
Body: <p>I am upgrading a clients website from Craft 2 to Craft 4, and I'm stuck at ajax fileuploads to the CP.</p>
  <p>I'm using fileupload.js for this.</p>
  <p>In Craft 2 my code looked like this, and I'm struggling to convert this into usable code for Craft 4:</p>
  <pre><code>$(inputID).fileupload({
      url: &quot;{{ url('actions/assets/uploadFile') }}&quot;,
      dataType: 'json',
      formData: [{name:'folderId', value:1}],
      done: function (e, data) {
              if (data.result.fileId) {
                      var fileId = data.result.fileId; //
              }
          }
      },
  })
  </code></pre>
  <p>I figured out that the correct URL to post to in Craft 4 is &quot;actions/assets/upload&quot; instead of &quot;actions/assets/uploadFile&quot;, however this doesn't work and gives me a 400 bad request error with no further explanation.</p>
  <p>I'm completely lost and don't know what further steps to take, I've already looked through all possible corners of the internet for a solution.</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2024-01-16T09:20:00.350Z
Comments.Text: Look like you need to pass the CRSF also when uploading the file.
Comments.UserDisplayName: aodihis
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2024-01-17T10:02:26.107Z
Comments.Text: Tried that and that unfortunately doesn't work
Comments.UserDisplayName: Branko
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2024-01-18T08:18:26.943Z
Comments.Text: I test it on my end it is work though, I will share you my code in answer hope it help.
Comments.UserDisplayName: aodihis
Tags: <assets><craft4><upload>
Title: Ajax fileupload into asset folder (Craft 4)
ThreadText: # Ajax fileupload into asset folder (Craft 4)
  
  (Asked by: username_0 on 2024-01-15)
  
  I am upgrading a clients website from Craft 2 to Craft 4, and I'm stuck at ajax fileuploads to the CP.
  
  I'm using fileupload.js for this.
  
  In Craft 2 my code looked like this, and I'm struggling to convert this into usable code for Craft 4:
  
  ```
  $(inputID).fileupload({
      url: "{{ url('actions/assets/uploadFile') }}",
      dataType: 'json',
      formData: [{name:'folderId', value:1}],
      done: function (e, data) {
              if (data.result.fileId) {
                      var fileId = data.result.fileId; //
              }
          }
      },
  })
  
  ```
  
  I figured out that the correct URL to post to in Craft 4 is "actions/assets/upload" instead of "actions/assets/uploadFile", however this doesn't work and gives me a 400 bad request error with no further explanation.
  
  I'm completely lost and don't know what further steps to take, I've already looked through all possible corners of the internet for a solution.
  
  **Tags:** assets, craft4, upload
  
  > **Comments:**
  > **username_1**: Look like you need to pass the CRSF also when uploading the file.  
  > **username_0**: Tried that and that unfortunately doesn't work  
  > **username_1**: I test it on my end it is work though, I will share you my code in answer hope it help.  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2024-01-18. Score: 0 | Accepted answer
  
  I test using this code and working.
  For uploading there are few thing that needed:
  
  1. user must login and have access to upload to certain volume.
  2. The form must have csrf.
  3. It require to use json as content type.
  
  ```
  {{ csrfInput() }}
  {{ actionInput('assets/upload') }}
  {{ hiddenInput('folderId', 1) }}
  
  <input name="assets-upload" type='file'>
  <input type="button" value="Upload Image" onclick="uploadImage()">
  
  ```
  
  ```
  <script>
      function uploadImage() {
          var formData = new FormData($("#imageUploadForm")[0]);
  
          $.ajax({
              type: "POST", // Replace with your server-side script
              data: formData,
              dataType: 'json',
              contentType: false,
              processData: false,
              success: function(response) {
                  $("#result").html(response);
              },
              error: function() {
                  $("#result").html("Error uploading image.");
              }
          });
      }
  </script>
  
  ```
  
  > **Comments:**
  > **username_0**: Thanks so much, it works  
  
  ---
  
  