CODEWITHSUNDEEP
javascriptasp.net-coreredactorasp.net-core-5.0redactor.js
Miguel Moura
Miguel Moura

Reputation: 39484

Upload Files to ASP.NET Core. Array is always empty

I have the following Asp.Net Core 5 controller to upload files:

[HttpPost("files")]
public virtual async Task<IActionResult> Upload(IFormFile[] files) {
}

The files are being uploaded from a Javascript library ...

I checked the browser console and the Request being sent is:

Request

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryWkiZgifAgMo5d8v3
Accept: */*
Referer: http://localhost:5000/admin/files/upload
Origin: http://localhost:5000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15
X-Requested-With: XMLHttpRequest


Request Data
MIME Type: multipart/form-data
Boundary: ----WebKitFormBoundaryWkiZgifAgMo5d8v3
Request Data: 

  ------WebKitFormBoundaryWkiZgifAgMo5d8v3
  Content-Disposition: form-data; name="files[]"; filename="4e540d9d58d4bf6dd7f713e775a8f9bd 2.jpg"
  Content-Type: image/jpeg
  ------WebKitFormBoundaryWkiZgifAgMo5d8v3--

In my File Controller the array files has no item ...

Any idea what I might be missing?

Upvotes: 1

Views: 1044

Answers (2)

Miguel Moura
Miguel Moura

Reputation: 39484

The problem is Redactor always sends the data key with [], e.g. files[].

It allows to change the name from files to something else but always adds [].

So I created a custom function ... Maybe useful to someone facing the same problem.

imageUpload: function(data, files, e, upload) {
  data.append('file', files[0]);
  return fetch('/files/images', {
    method: 'POST',
    body: data
  })
  .then(response => {
    return response.json()
  })
  .then(response => {
    upload.complete(response);
  })
  .catch(response => {
    upload.complete(response);
  });
}

Upvotes: 0

Fei Han
Fei Han

Reputation: 27825

In my File Controller the array files has no item

Content-Disposition: form-data; name="files[]"; filename="4e540d9d58d4bf6dd7f713e775a8f9bd 2.jpg"

In your code, we can find your action method Upload accept a parameter named files, but you seems set form data key with files[], which cause the posted files can not bound to IFormFile[] files parameter.

To fix it, you can try to modify form data key from files[] to files.

formData.append("files", imgfile);

Upvotes: 1

Related Questions