<blockquote>
<p>Issue 1: Posting to assets/upload now returns a json response, resulting in a HTTP 400 – Bad Request – yii\web\BadRequestHttpException - Request must accept JSON in response. I've temporarely solved this by sending an Accept: application/json header but was wondering if there's a recommended way to do this?</p>
</blockquote>
<p>That is the recommended way. The controller action can only return JSON, so it requires the client to accept a JSON response. This is <a href="https://github.com/craftcms/cms/blob/main/src/controllers/AssetsController.php#L235" rel="nofollow noreferrer">enforced in the controller action</a>, and you can't change that.</p>
<blockquote>
<p>Issue 2: I'm trying to upload multiple files, but only 1 file is uploaded. Multiple files are in the payload and there's no error. Is there anything I need to do to handle multiple file uploads?</p>
</blockquote>
<p>The controller action doesn't support multiple uploads. In the source code for that action you can see that it is only <a href="https://github.com/craftcms/cms/blob/main/src/controllers/AssetsController.php#L238" rel="nofollow noreferrer">looking for a single uploaded file</a>, and the rest of the code only supports saving a single asset. You can't change that from the outside, but there are a couple of options on how to solve this issue:</p>
<ol>
<li>Intercept the form submission using JavaScript, then upload the files one-by-one using <code>fetch()</code> or something similar. There are some libraries that will help you do that, <a href="https://pqina.nl/filepond/" rel="nofollow noreferrer">filepond</a> for instance.</li>
<li>Write your own controller with an action that supports multiple uploads in a single request. You can use the existing controller action as a template, and then extend that to support multiple uploads.</li>
</ol>

CC BY-SA 4.0
2023-10-10T10:38:06.447Z
Thank you Moritz. As Craft itself is using this controller to upload files, I guess they also do something 'extra' in de control panel to process multiple files.
MetaMachine
CC BY-SA 4.0
2023-10-10T10:59:17.100Z
@MetaMachine Yes, they're using approach #1, intercepting the upload with JavaScript and then using one separate request for every file. If you open the Network tab in your Browser DevTools, then upload multiple assets at once, you can see that it fires one request to `assets/upload` for every individual file.
MoritzLost
CC BY-SA 4.0
2023-10-09T13:29:20.777Z
2023-10-09T13:29:20.777Z
MoritzLost
<p>Regarding your issue 2, I think to upload multiple files you need to add brackets to the name like:</p>
<p><code>&lt;input name=&quot;assets-upload[]&quot; type=&quot;file&quot; multiple&gt;</code></p>
<p>Then use:</p>
<p><code>UploadedFile::getInstancesByName('assets-upload')</code></p>

CC BY-SA 4.0
2023-10-16T20:02:29.750Z
just want to clarify that "adding brackets" here means "treat the data as an array". When something is an array data type you need to treat it as such, which can help with issues like these throughout development :)
cherrykoda
CC BY-SA 4.0
2023-10-15T17:29:03.883Z
2023-10-15T17:29:03.883Z
Ralph Segi
<p>I'm trying to upload assets directly to a volume using the 'assets/upload' controller in a front-end form.</p>
<p>There must have been some changes since Craft 3 and I'm running into 2 issues:</p>
<ul>
<li>Issue 1: Posting to <code>assets/upload</code> now returns a json response, resulting in a <code>HTTP 400 – Bad Request – yii\web\BadRequestHttpException</code> - <code>Request must accept JSON in response</code>. I've temporarely solved this by sending an <code>Accept: application/json</code> header but was wondering if there's a recommended way to do this?</li>
<li>Issue 2: I'm trying to upload multiple files, but only 1 file is uploaded. Multiple files are in the payload and there's no error. Is there anything I need to do to handle multiple file uploads?</li>
</ul>
<p>Here's a stripped down version of my form.</p>
<pre><code>&lt;form method=&quot;post&quot; accept-charset=&quot;UTF-8&quot; enctype=&quot;multipart/form-data&quot;&gt;
  {{ csrfInput() }}
  {{ actionInput('assets/upload') }}
  {{ hiddenInput('folderId', 18) }}

  &lt;input name=&quot;assets-upload&quot; type=&quot;file&quot; multiple&gt;

  &lt;button type=&quot;submit&quot;&gt;Upload files&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<assets><controller><upload><frontend-form>
Uploading (multiple) assets to assets controller via front end with Craft 4
# Uploading (multiple) assets to assets controller via front end with Craft 4

(Asked by: username_0 on 2023-10-09)

I'm trying to upload assets directly to a volume using the 'assets/upload' controller in a front-end form.
There must have been some changes since Craft 3 and I'm running into 2 issues:

Issue 1: Posting to assets/upload now returns a json response, resulting in a HTTP 400 – Bad Request – yii\web\BadRequestHttpException - Request must accept JSON in response. I've temporarely solved this by sending an Accept: application/json header but was wondering if there's a recommended way to do this?
Issue 2: I'm trying to upload multiple files, but only 1 file is uploaded. Multiple files are in the payload and there's no error. Is there anything I need to do to handle multiple file uploads?

Here's a stripped down version of my form.

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

  

  Upload files

**Tags:** assets, controller, upload, frontend-form


---

## 2 answers

### Answer by username_1 on 2023-10-09. Score: 3 | Accepted answer

> Issue 1: Posting to assets/upload now returns a json response, resulting in a HTTP 400 – Bad Request – yii\web\BadRequestHttpException - Request must accept JSON in response. I've temporarely solved this by sending an Accept: application/json header but was wondering if there's a recommended way to do this?

That is the recommended way. The controller action can only return JSON, so it requires the client to accept a JSON response. This is [enforced in the controller action](https://github.com/craftcms/cms/blob/main/src/controllers/AssetsController.php#L235), and you can't change that.

> Issue 2: I'm trying to upload multiple files, but only 1 file is uploaded. Multiple files are in the payload and there's no error. Is there anything I need to do to handle multiple file uploads?

The controller action doesn't support multiple uploads. In the source code for that action you can see that it is only [looking for a single uploaded file](https://github.com/craftcms/cms/blob/main/src/controllers/AssetsController.php#L238), and the rest of the code only supports saving a single asset. You can't change that from the outside, but there are a couple of options on how to solve this issue:

1. Intercept the form submission using JavaScript, then upload the files one-by-one using `fetch()` or something similar. There are some libraries that will help you do that, [filepond](https://pqina.nl/filepond/) for instance.
2. Write your own controller with an action that supports multiple uploads in a single request. You can use the existing controller action as a template, and then extend that to support multiple uploads.

> **Comments:**
> **username_0**: Thank you Moritz. As Craft itself is using this controller to upload files, I guess they also do something 'extra' in de control panel to process multiple files.  
> **username_1**: @username_0 Yes, they're using approach #1, intercepting the upload with JavaScript and then using one separate request for every file. If you open the Network tab in your Browser DevTools, then upload multiple assets at once, you can see that it fires one request to `assets/upload` for every individual file.  

---

### Answer by username_2 on 2023-10-15. Score: -1

Regarding your issue 2, I think to upload multiple files you need to add brackets to the name like:

Then use:

`UploadedFile::getInstancesByName('assets-upload')`

> **Comments:**
> **username_3**: just want to clarify that "adding brackets" here means "treat the data as an array". When something is an array data type you need to treat it as such, which can help with issues like these throughout development :)  

---

