I'm trying to make a post request with a form data, containing a file and a Json Object.

To perform this, i set the Content-Type to undefined, according to the following post

This causes the browser to set the Content-Type to multipart/form-data and fill the boundary correctly.

However, on the (springboot) server side, i get this error message :

Resolved exception caused by Handler execution: org.springframework.web.HttpMediaTypeNotSupportedException: Invalid mime type "undefined": does not contain '/'

So, it seems that the "undefined" content type is not correctly managed by the browser.

Here is the fetch mand, on the client side :

    // My document blob
    var documentBlob = new Blob([JSON.stringify({ documentName: "toto" })], {
      type: "application/json"
    });

    // My Form data containing a file and the document blob
    var formData = new FormData();
    formData.append("file", this.state.file);
    formData.append("document", documentBlob);

    // Fetch mand
    fetch("/document/", {
      method: "POST",
      headers: {
        "Content-Type": undefined
      },
      data: formData
    }).then(function(response) {
      console.log("response!");
    });

Here is the server side (spring boot rest controller) :

@RestController
@RequestMapping("/document")
public class DocumentController {

    @Autowired
    private DocumentRepository documentRepository;  

    @RequestMapping(value = "/", method = RequestMethod.POST, consumes = { "multipart/form-data" })
    public boolean addDocument(@RequestPart("document") Document document, @RequestPart("file") MultipartFile file) {
        documentRepository.save(document);
        return true;
    }
}

"Document" is a simple pojo :

@Entity
public class Document {
    private String documentName;

    public Document() {
    }

    public Document(String documentName) {
        this.setDocumentName(documentName);
    }

    public String getDocumentName() {
        return documentName;
    }

    public void setDocumentName(String documentName) {
        this.documentName = documentName;
    }
}

So, i don't really get if the problem is in the client or server side.

Thanks!

//////////////////////////////

EDIT : I finally got it working, but using axios instead of fecth:

Here is my finaly spring boot rest controller :

@RequestMapping(value = "/", method = RequestMethod.POST)
    public boolean addDocument(@RequestPart("document") Document document, @RequestPart("file") MultipartFile file) {
        // Do things!
        return true;
    }

And my javascript/axios call :

var documentBlob = new Blob([JSON.stringify({ documentName: "test" })], {
      type: "application/json"
    });
    var formData = new FormData();

    formData.append("document", documentBlob);
    formData.append("file", this.state.file);

    axios({
      method: "post",
      url: "/document/",
      data: formData,
      config: { headers: { "Content-Type": "multipart/form-data" } }
    })
      .then(response => {
        console.log("it's working!");
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });

I'm trying to make a post request with a form data, containing a file and a Json Object.

To perform this, i set the Content-Type to undefined, according to the following post https://stackoverflow./a/25183266/4573767

This causes the browser to set the Content-Type to multipart/form-data and fill the boundary correctly.

However, on the (springboot) server side, i get this error message :

Resolved exception caused by Handler execution: org.springframework.web.HttpMediaTypeNotSupportedException: Invalid mime type "undefined": does not contain '/'

So, it seems that the "undefined" content type is not correctly managed by the browser.

Here is the fetch mand, on the client side :

    // My document blob
    var documentBlob = new Blob([JSON.stringify({ documentName: "toto" })], {
      type: "application/json"
    });

    // My Form data containing a file and the document blob
    var formData = new FormData();
    formData.append("file", this.state.file);
    formData.append("document", documentBlob);

    // Fetch mand
    fetch("/document/", {
      method: "POST",
      headers: {
        "Content-Type": undefined
      },
      data: formData
    }).then(function(response) {
      console.log("response!");
    });

Here is the server side (spring boot rest controller) :

@RestController
@RequestMapping("/document")
public class DocumentController {

    @Autowired
    private DocumentRepository documentRepository;  

    @RequestMapping(value = "/", method = RequestMethod.POST, consumes = { "multipart/form-data" })
    public boolean addDocument(@RequestPart("document") Document document, @RequestPart("file") MultipartFile file) {
        documentRepository.save(document);
        return true;
    }
}

"Document" is a simple pojo :

@Entity
public class Document {
    private String documentName;

    public Document() {
    }

    public Document(String documentName) {
        this.setDocumentName(documentName);
    }

    public String getDocumentName() {
        return documentName;
    }

    public void setDocumentName(String documentName) {
        this.documentName = documentName;
    }
}

So, i don't really get if the problem is in the client or server side.

Thanks!

//////////////////////////////

EDIT : I finally got it working, but using axios instead of fecth:

Here is my finaly spring boot rest controller :

@RequestMapping(value = "/", method = RequestMethod.POST)
    public boolean addDocument(@RequestPart("document") Document document, @RequestPart("file") MultipartFile file) {
        // Do things!
        return true;
    }

And my javascript/axios call :

var documentBlob = new Blob([JSON.stringify({ documentName: "test" })], {
      type: "application/json"
    });
    var formData = new FormData();

    formData.append("document", documentBlob);
    formData.append("file", this.state.file);

    axios({
      method: "post",
      url: "/document/",
      data: formData,
      config: { headers: { "Content-Type": "multipart/form-data" } }
    })
      .then(response => {
        console.log("it's working!");
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });

• javascript
• spring-boot
• fetch
• mime-types
• form-data

Share Improve this question Follow edited Mar 31, 2018 at 12:58 ren asked Mar 26, 2018 at 16:40 renren 4311 gold badge11 silver badge1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

I finally got it working, but using axios instead of fecth.

See the edited original post to see my solution.

I think the issue is in your spring controller request mapping. You should not have the mapping to / there.

Try this...

@RestController
@RequestMapping("/document")
public class DocumentController {

    @Autowired
    private DocumentRepository documentRepository;  

    @RequestMapping(method = RequestMethod.POST, consumes = { "multipart/form-data" })
    public boolean addDocument(@RequestPart("properties") Document document, @RequestPart("file") MultipartFile file) {
        documentRepository.save(document);
        return true;
    }
}

Have you tried to make that request with the "multipart/form-data" content type header?

With that mapping method consuming the defined header, your controller won't be able to parse the request without the proper content type.