How to append objects in FormData in javascript?

Question

We need to send the data to the server by appending it within formdata in javascript. In javascript, we have handle this as like below.

var ajax = new XMLHttpRequest();
ajax.open("POST", url, true);
var formData = new FormData();
var obj = {url: "uploadUrl",type: 'POST', mode: true};
formData.append('myData', JSON.stringify(obj));
ajax.send(formData);

In server end, we have the method as like below.

 public void Save(MyModel args) {
     ....
    }


    public class MyModel
    {

        public MyObj myData { get; set; }

    }
    public class MyObj
    {
        public string url { get; set; }
        public string type { get; set; }
        public bool mode { get; set; }
    }

args.myData always received as null. How to receive the data sent from the client here in this format ? Suggest your ideas.

From the code provided you don't attach the form data to the xmlhttprequest object. — Dimitar
– Dimitar, Commented Jul 17, 2019 at 10:04
@Dimitar, I missed to mention that, but that is not the issue in our side. — Karthik Ravichandran
– Karthik Ravichandran, Commented Jul 17, 2019 at 10:13
Your ajax.open still looks wrong (see my answer): is this just another mistake here? Did you inspect your network traffic to see if the problem is on the client or on the server side? — Jb31
– Jb31, Commented Jul 17, 2019 at 10:21
@KarthikRavichandran and you have missed what you have as "server side". MVC, Web Api, something else ? Please provide all the necessary infomation, so people can help you. — Dimitar
– Dimitar, Commented Jul 17, 2019 at 10:35

Jb31 · Accepted Answer · 2019-07-17 10:08:52Z

2

You need to explicitly send the formData:

var ajax = new XMLHttpRequest();
ajax.open('POST', url, true);
var formData = new FormData();
var obj = {url: "uploadUrl",type: 'POST', mode: true};
formData.append('myData', obj);
ajax.send(formData);

(Note that I fixed the arg order in ajax.open and the received formdata will be something like [object Object] but I think JSON.stringify() should be the solution here - that depends on how your server parses the formdata)

edited Jul 17, 2019 at 10:08

answered Jul 17, 2019 at 10:06

Jb31

1,3911 gold badge10 silver badges20 bronze badges

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

Comments

Naveen Kumar V · Accepted Answer · 2019-07-17 11:05:39Z

1

In server code, set the type of args to String and check if you are getting the stringified data. If you are getting it, parse the data accordingly to fit into MyModel.

Providing more info of Server code might help me to look into further.

EDIT 1: Links that might also help

edited Jul 17, 2019 at 11:05

answered Jul 17, 2019 at 10:45

Naveen Kumar V

2,8692 gold badges32 silver badges47 bronze badges

3 Comments

Karthik Ravichandran Over a year ago

If we set the argument type as string it receives properly. shall we changed the type with strongly defined class instead of string? because multiple data will be sent to server

Naveen Kumar V Over a year ago

Can you provide the args (string data).

Naveen Kumar V Over a year ago

Please check the attached links which might help you.

Collectives™ on Stack Overflow

How to append objects in FormData in javascript?

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related