<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>

CC BY-SA 4.0
2024-01-22T10:18:35.937Z
Thanks so much, it works
Branko
CC BY-SA 4.0
2024-01-18T08:25:46.363Z
2024-01-18T08:25:46.363Z
aodihis
<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>

CC BY-SA 4.0
2024-01-16T09:20:00.350Z
Look like you need to pass the CRSF also when uploading the file.
aodihis
CC BY-SA 4.0
2024-01-17T10:02:26.107Z
Tried that and that unfortunately doesn't work
Branko
CC BY-SA 4.0
2024-01-18T08:18:26.943Z
I test it on my end it is work though, I will share you my code in answer hope it help.
aodihis
<assets><craft4><upload>
Ajax fileupload into asset folder (Craft 4)
# 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:

user must login and have access to upload to certain volume.
The form must have csrf.
It require to use json as content type.

{{ csrfInput() }}
{{ actionInput('assets/upload') }}
{{ hiddenInput('folderId', 1) }}

> **Comments:**
> **username_0**: Thanks so much, it works  

---

