SpringBoot / Fetch : Invalid mime type "undefined": does not contain '/'

Question

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.com/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 command, 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 command
    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);
      });

score 1 · Accepted Answer · answered Apr 01 '18 at 15:44

1

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

See the edited original post to see my solution.

answered Apr 01 '18 at 15:44

ren

43
1
10

score 0 · Answer 2 · answered Mar 26 '18 at 17:03

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

Thanks for the advice, but it seems the issue is not there. I think that if the mapping was incorrect, the error should be 404, no? So, even without the / in the mapping, i still have the error message "Invalid mime type "undefined": does not contain '/'" on server side — ren, Mar 26 '18 at 22:32

score 0 · Answer 3 · answered Mar 28 '18 at 18:50

0

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.

answered Mar 28 '18 at 18:50

Guilherme Iobbi

9
3

1

Yeah, i tried it too, but then the server reject my request with the message : "org.apache.tomcat.util.http.fileupload.FileUploadException: **the request was rejected because no multipart boundary was found"** I finnally got it working using axios (see my edited initial post) instead of fetch. Don't know if it's a fetch problem or my implementation that was faulty... – ren Mar 31 '18 at 12:52

SpringBoot / Fetch : Invalid mime type "undefined": does not contain '/'

3 Answers3