Sending POST request from React application with Array of Files, is received as array of strings in Spring API

Question

Im using react-dropzone to bulk upload images to my backend. The documentation says that the onChange function returns an array of Files. I save that array of files to my state object. https://www.npmjs.com/package/material-ui-dropzone

The object im passing has the form of

this.state = {
  title: '',
  description: '',
  pictures: []
};

My fetch call to my backend looks like this

createProject = () =>  {
  let formData = new FormData();
  formData.append('title', this.state.title);
  formData.append('description', this.state.description);
  formData.append('pictures', this.state.pictures);
  fetch("http://localhost:5000/api/project/uploadProject", 
  {
    mode: 'no-cors',
    method: "POST",
    body: formData
  }).then(function (res) {
    if (res.ok) {
      alert("Perfect! ");
    } else if (res.status == 401) {
      alert("Oops! ");
    }
  }, function (e) {
    alert("Error submitting form!");
  });
}

My backend which is built with Spring has the endpoint written like

@RequestMapping(path = "/uploadProject", method = RequestMethod.POST,
        consumes = {"multipart/form-data"})
public void uploadFile( @ModelAttribute ProjectRequest projectRequest) {

And then finally my ProjectRequest model looks like

public class ProjectRequest {
@NotBlank
@Size(max = 140)
private String title;

@NotBlank
private String description;

@Size(max = 4)
private List<MultipartFile> pictures;

When I run the fetch call, I keep getting this error from Spring saying that im passing an array of Strings and it cannot be converted to an array of MultipartFile

Resolved [org.springframework.validation.BindException: org.springframework.validation.BeanPropertyBindingResult: 1 errors Field error in object 'projectRequest' on field 'pictures': rejected value []; codes [typeMismatch.projectRequest.pictures,typeMismatch.pictures,typeMismatch.java.util.List,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [projectRequest.pictures,pictures]; arguments []; default message [pictures]]; default message [Failed to convert property value of type 'java.lang.String' to required type 'java.util.List' for property 'pictures'; nested exception is java.lang.IllegalStateException: Cannot convert value of type 'java.lang.String' to required type 'org.springframework.web.multipart.MultipartFile' for property 'pictures[0]': no matching editors or conversion strategy found]]

Ive tried hardcoding an array of strings into the pictures field and setting the projectRequest model pictures list to accept a list of Strings, to see whether I wrote the backend endpoint wrong, but that goes through fine. For some reason it only fails when I have an array of files in the pictures param.

Does anyone know why this error keeps occurring?

UPDATE: So I found the exact problem im having at this link: File object becomes string when pushed to an array? JS

Does anyone know how I can get around have an array of string [object file] ?

ahamdsuhail · Accepted Answer · 2020-01-06 10:31:05Z

1

You can send array of files this way. Loop through the files and append them in the formdata under the same key used in your ProjectRequest model.

for(let i=0; i< this.state.pictures.length; i++){
    formData.append("pictures",this.state.pictures[i]);
  }

No changes needed in server side.

answered Jan 6, 2020 at 10:31

ahamdsuhail

1132 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Connor Leech Over a year ago

This saved me. You have to send the file as the payload, not an array with one file in it.

Collectives™ on Stack Overflow

Sending POST request from React application with Array of Files, is received as array of strings in Spring API

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related