Java Spring boot upload file and send other data as ajax using form submit

Question

In my application I need to upload a file and along with that I need to send one more parameter. This is my code for the client side.

$.ajax({
                url : "/uploadFile",
                type : "POST",

                data: {file_name:new FormData($("#upload-file-form")[0]),"groupName":"xxx"},
                enctype : 'multipart/form-data',
        //      processData : false,
                contentType : false,
                cache : false,

                success : function(data) {
                    if (data == "success") {
                        // alert ("file uploaded successfully")

                        $(".modal-body").html(
                                "<p>File uploaded Successfully</p>")
                        $('#myModal').modal('show');

                    }
                    if (data == "failure") {
                    alert("failure)
                    }
               }
        }

My code for server side :

public String handleFileUpload(@RequestParam(value="file_name") MultipartFile file ,@RequestParam(value="groupName") String name){


    System.out.println("file");
    return "success";
}

But it says the current request is not a MultiPart Request. org.springframework.web.multipart.MultipartException: The current request is not a multipart request

How should I parse both file name and the other parameter? please help

My html form.

<form id="upload-file-form">
  <label for="upload-file-input">Upload your CSV file:</label>
  <input id="upload-file-input" type="file" name="uploadfile" accept="*" class="align-right" />
  <br>

  <input type="submit"  id ="groupUpload" value="click here to upload the file" class="btn btn-info" >
</form>

Jai · Accepted Answer · 2015-12-24 09:18:37Z

1

See you need to append the values in the FormData and it is the only thing needed to be passed. So you can append the extra value which needs to be passed like this:

var fd = new FormData($("#upload-file-form")[0]);
    fd.append('groupName', 'xxx');

now in the ajax you can simply pass this:

data: fd,
processData : false,  // <----required to upload
contentType : false,  // <----required to upload

FormData().append() doc at MDN.

So your code should be like this:

$("#upload-file-form").submit(function(e){
    e.preventDefault();  // <--------stops the form submission
    var fd = new FormData($("#upload-file-form")[0]);
        fd.append('groupName', 'xxx');

    $.ajax({
      url: "/uploadFile",
      type: "POST",
      data: fd,
      enctype: 'multipart/form-data',
      processData: false,
      contentType: false,
      cache: false,
      success: function(data) {
          if (data == "success") {
            $(".modal-body").html("<p>File uploaded Successfully</p>");
            $('#myModal').modal('show');
          } else if (data == "failure") {
            alert("failure)
          }
      }
    });
});

jQuery.ajax() to upload files example @ MDN

edited Dec 24, 2015 at 9:18

answered Dec 24, 2015 at 8:49

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

5 Comments

Niranjan Dattatreya Over a year ago

Ya I tried this , this is the error I am getting "There was an unexpected error (type=Method Not Allowed, status=405). Request method 'GET' not supported ". But my request is POST type ..

Jai Over a year ago

Most probably your form is getting submitted you need to stop the form submission to navigate to the action path.

Niranjan Dattatreya Over a year ago

you mean event.preventDefault() method?

Niranjan Dattatreya Over a year ago

Ya I tired that ."This is the error I am getting 400 (Bad Request)". I tried by converting fd to Json String ,but it says again that it it is not a multipart request. Is there an error in the code for server side?

Jai Over a year ago

can you post your form in your question?

Collectives™ on Stack Overflow

Java Spring boot upload file and send other data as ajax using form submit

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related