FormData - Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement - form-data

Question

Could someone tell me why I always get a following error?
Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
My HTML:
<form role="form" id="uploadSortimentReport" enctype="multipart/form-data">
<div class="card-body">
<div class="form-group">
<label>XML file</label>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" name="report">
<label class="custom-file-label">choose file</label>
</div>
</div>
</div>
<div class="form-group">
<label>Country</label>
<select name="country" class="form-control">
<option value="">choose</option>
<option value="sk">Slovak</option>
<option value="cz">Czech</option>
</select>
</div>
</div>
<div class="card-footer">
<button type="submit" name="uploadReport" class="btn btn-info" id="uploadButton">Upload</button>
</div>
</form>
My JS (I know that ajax is not completed, but it shouldn't be throw an error I think)
$.validator.setDefaults({
submitHandler: function () {
$('#uploadButton').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Processing');
var fd = new FormData($('#uploadSortimentReport'));
}
});
$('#uploadSortimentReport').validate({
rules: {
report: {
required: true,
extension: "xml"
},
country: {
required: true
}
},
messages: {
report: {
required: "Please choose file.",
extension: "Only XML file is accepted."
},
country: {
required: "Please choose country."
}
},
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
I tried to do everything. Nothing helped.
Thank you.

Answer 1

var fd = new FormData($('#uploadSortimentReport')[0]);
Try this, because $('#uploadSortimentReport') is a jquery wrapper object. But class formData requires a vanilla js dom object.
For More Info : What does $(selector)[0] mean in jQuery?