FormData is not a constructor

Question

I'm trying to make a ajax request to upload a image. My problem is when I create the FormData. My console is saying "dataForm is not a constructor".

How can I solve this ?

here is my script

$("#new-broadcast-image-static").on("change", function(formData) {
                var formData = new formData();

                // line that console point the error //
                var file = $("#new-broadcast-image-static")[0].files[0];
                formData.set("image", file);

                $.ajax({
                    url: apiUrl + "image/upload",
                    type: 'POST',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function(data) {
                        hashNewBroadcastImage = data.data.identifier;
                        $("#hash-new-broadcast-image-static").val(hashNewBroadcastImage);
                    }
                });
            });

Laudian

What do you think the callback for .on() gives? The documentation says it passes the event as the first parameter. It's not something you can execute. – Darrel

What browser are you using? check this link for compatible browsers developer.mozilla.org/en-US/docs/Web/API/FormData – Cordierite

I'm voting to close as off-topic because this was just a typo. – Darrel

Answer 1

Capitalize it: var formData = new FormData();

But what are you trying to acomplish anyways? You are reasigning a variable you are getting as parameter:

 $("#new-broadcast-image-static").on("change", function(formData) {
      var formData = new formData();

You probably want to change it to something like

 $("#new-broadcast-image-static").on("change", function(e) {
      var formData = new FormData();

Illassorted

Answer 2

Not totally sure about it, but I think you have a capital letter mistake, you've write formData() instead of FormData()

The correct way:

var formData = new FormData();

Bionomics

Answer 3

---

Please Check this Possibility it will definitely solve your problem

---

Anywhere in your JS Code if you are assigning a value to FormData like below

FormData={"PersonID":1,"PersonName":"Test"};

and if you use like this

var a = new FormData();

Then it will throw an error like "FormData is not a constructor as it is already declared as an Object".

Interclavicle

I also made same mistake. I already declared an array with name FormData. Below that i was declaring FormData() – Racecourse

Answer 4

I tried all of the solutions for this and none worked. After hours of pulling my hair out, I discovered it was because I had a filed named FormData, which was a partial Vue Pinia State. I changed the name of that file to formData and it worked. So if you run into this problem and can't solve it and you have FormData used as a variable or file name anywhere in your project - change it and see if that fixes it.

Superpose

Answer 5

as my experience sometime because of in javascript function is debugger mode.

Mauretania

Answer 6

You have to import like:

import * as FormData from 'form-data';

We can't use:

import FormData from 'form-data';

Gritty