Failed to construct 'FormData'

Question

When I upload file in my dropzone, it do not work. Usually it's work very well, but since 1 month I have this JS Error :

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

That is the code, when I use FormData :

 var form_data = new FormData("#my-awesome-dropzone");

Dopzone code

  Dropzone.options.myAwesomeDropzone = {
    maxFilesize: 5,
    maxFiles: 1,    
    addRemoveLinks: true,
    dictResponseError: 'Server not Configured',
    acceptedFiles: ".pdf",
    init:function(){
      var self = this;
      // config
      self.options.addRemoveLinks = true;
      self.options.dictRemoveFile = "Delete";
      //New file added
      self.on("addedfile", function (file) {
          console.log('new file added ', file);
             if(!confirm("Do you want to upload the file?")){
                this.removeFile(file);
                return false;
            }

      });
      // Send file starts
      self.on("sending", function (file, xhr, formData) {
        console.log('upload started', file);
        $('.meter').show();

            var form_data = new FormData("#my-awesome-dropzone");

            $.ajax({
                url: '/settings/uploadFile', 
                data: 'file=' + file.name ,
                type: 'POST',
                processData: false,
                contentType: false,
                success: function(response) {
                }
            });
      });
      
      // File upload Progress
      self.on("totaluploadprogress", function (progress) {
        console.log("progress ", progress);
        $('.roller').width(progress + '%');
      });

      self.on("queuecomplete", function (progress) {
        $('.meter').delay(999).slideUp(999);
      });
      
      // On removing file
      self.on("removedfile", function (file) {
        console.log(file);
      });
    }

HTML CODE

     <form  enctype="multipart/form-data" action="/settings/uploadFile"  method="post" class="dropzone" 
                        id="my-awesome-dropzone">

         
                     </form>

Edit 01-08-2019 : Okay, just tested, and it's works on Microsoft Edge 44.17763.1.0 but not on Google Chrome or Firefox, any explanation?

Please update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/)). Although Stack Snippets disallow *submitting* forms, as you can see from the live example in my answer, you can still create `FormData` and so should be able to replicate the problem. — T.J. Crowder, Aug 01 '19 at 09:19
Okay, I will try to make an example for my case. But I think it's up of browser no ? Because my code use to works on all Browsers, and now it's works only in Microsoft Edge, why ? — MasterSinge, Aug 01 '19 at 09:32

T.J. Crowder · Accepted Answer · 2019-08-01T09:19:07.607

36

You're passing a string to FormData. As the error says, it expects a form element, not a string. So:

var form_data = new FormData(document.getElementById("my-awesome-dropzone"));

Live Example:

var data = new FormData(document.getElementById("my-awesome-dropzone"));
console.log("Created FormData, " + [...data.keys()].length + " keys in data");

<form  enctype="multipart/form-data" action="/settings/uploadFile"  method="post" class="dropzone" id="my-awesome-dropzone">
<input type="text" name="x" value="kittens">
<input type="text" name="y" value="puppies">
</form>

edited Aug 01 '19 at 09:19

answered Jul 31 '19 at 08:06

T.J. Crowder

1,031,962
187
1,923
1,875

@MasterSinge - Then your element with `id="my-awesome-dropzone"` isn't a `form` element, or it doesn't exist (yet) when this code runs, which would make `getElementById` return `null` [which also causes this error when passed to the `FormData` constructor]). – T.J. Crowder Jul 31 '19 at 09:57
@tjcrowder - When I console log, it return data => [link](https://i.ibb.co/FWsy1w1/toto.png) – MasterSinge Aug 01 '19 at 08:53
1

This error also occurs if you do not have
tags defined in your html but you are calling new FormData on a different element id.
– Deke Nov 04 '19 at 02:36
@MasterSinge - If I copy the `form` HTML from your question and paste it into a file, and copy the code from the answer above into a `script` in that file (after the `form`, so I know it exists), it works a treat on Chrome. – T.J. Crowder Nov 04 '19 at 07:19
my mistake was that I had a form inside another – Jhon Jesus Apr 11 '21 at 23:15

Failed to construct 'FormData'

1 Answers1

Linked