0

I am working with Spring boot. I want to upload a file along with some data using an AJAX call. However, when I enter the data, select the file, and click the submit button, I get the following exception:

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

<form  id="course-form" enctype="multipart/form-data">
  <input type="text" class="form-control" placeholder="Course Name" name="courseName" id="courseName">
  <input type="text" class="form-control" placeholder="Total no of sets" name="noOfSets" id="noOfSets">
  <input type="text" class="form-control" placeholder="Total fees" name="fees" id="fees">
  <input type="file" class="form-control" placeholder="Select an image" name="image" id="image">
  <input type="text" name="requirements" id="requirements" class="form-control">
  <input type="text" name="requirements" id="requirements" class="form-control">
  <input type="button" value="Add more requirements" id="add-req">
  <input type="submit" value="Submit">
</form>

ajax call

function saveCourse(){
             var itemData=new FormData($("#courseForm")[0]);
            $.ajax({
                type : "POST",
                url : "/course/save",
                data : itemData,
                async: false,
                processData : false,
                cache : false,
                contentType : 'multipart/form-data',
                success : function(result) {
                    if(result.message !=null){
                    alert(result.message);
                    }
                },
                error : function(e){
                    alert("Error! Please enter proper data");
                }
            });
            return false;
        }

Controller class

@PostMapping(value="/course/save")
public ResponseDTO addCourse(MultipartHttpServletRequest request, CourseDTO courseDTO) 
{
  System.out.println("Course controller save menthod started");
  return null;
}

Why am I receiving this exception? And, how can I solve the problem?

Merwais Muafaq
  • 101
  • 2
  • 13

2 Answers2

0

It seems you are missing not be setting enctype and should explicitly setting contentType: false,:

function saveCourse() {
  var form = $('#course-form')[0];
  var courseData = new FormData(form);
  $.ajax({
    type : "POST",
    url : "/course/save",
    contentType: false,
    data: courseData,
    processData: false,
    success: function(result) {
      if (result.message != null) {
        alert(result.message);
      }
    },
    error: function(e) {
      alert("Error! Please enter proper data");
    }
  });
  return false;
}

By omiting it, the browser will take care of generating the proper content type with multipart boundary, something like:

content-type: multipart/form-data; boundary=----WebKitFormBoundaryQ0pBuvRC1EzDAQWT````
enapupe
  • 15,691
  • 3
  • 29
  • 45
  • I have explicitly defined I have edited the code contentType : 'multipart/form-data', – Merwais Muafaq Jan 29 '19 at 16:45
  • What do you mean? Did you provide the final mutlipart contentType? How do you calculate it? I don't think you can do it, that's why you would unset it and let the browser do its thing. – enapupe Jan 29 '19 at 17:35
  • I set the contentType false but still iam getting the following error java.lang.IllegalStateException: Current request is not of type [org.springframework.web.multipart.MultipartHttpServletRequest]: ServletWebRequest: uri=/course/save;client=0:0:0:0:0:0:0:1 – Merwais Muafaq Jan 29 '19 at 17:55
0

The Issue is resolved with the following ajax code

 var itemData=new FormData($("#courseForm")[0]);
        $.ajax({
            type : "POST",
            url : "/course/save",
            data : itemData,
            dataType : "json"
            processData : false,
            cache : false,
            contenttype : false;
            success : function(result) {
                if(result.message !=null){
                alert(result.message);
                }
            },
            error : function(e){
                alert("Error! Please enter proper data");
            }
        });
        return false;

And we need to fetch the data in controller using @RequestParam annotation and the file using @RequestPart annotation

Merwais Muafaq
  • 101
  • 2
  • 13