Empty object in Javascript FormData object

Question

I have this html form which has one file type and a text box.

 function uploadFiles() { debugger var input = document.getElementById('files'); var files = input.files; console.log(files) var formData = new FormData(); for (var i = 0; i != files.length; i++) { formData.append("files", files[i]); } var tags = $('#tags').val(); console.log(tags) formData.append("tags", tags); debugger for (let [name, value] of formData) { alert(`${name} = ${value}`); } var myForm = JSON.stringify(formData) console.log(myForm) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div class="form-group"> <div class="buttons"> <div class="upload-button"> <input id="files" name="files" type="file" size="1" /> </div> </div> </div> <div class="form-group"> <label for="tags">Tags:</label> <input type="text" class="form-control" id="tags"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary" id="btnSave" onclick="uploadFiles();">Upload and Save</button> </div> </div> </form>

The problem is console.log(myForm) prints {} . And when for loop, it prints files = [object File] . The purpose to get this right so that I can pass it to the Api data property.

$.ajax(
    {
        url: "https://localhost:44371/api/file/upload",
        //data: formData,
        processData: false,
        contentType: false,
        type: "POST",
        data: JSON.stringify(formData),
        dataType: 'json',
        success: function () {
            debugger
            alert("Files Uploaded!");
            $('#fileUploadStatus').text('File uploaded.')
            checkSaveButton()
        }
    }
);

Answer 1

EITHER use a type=button to not submit OR use the submit event and prevent it from submitting

Also stringify will not show a file

Relevant SO questions

How to convert FormData(HTML5 Object) to JSON

FormData.append() doesn't work with files

 document.getElementById("form1").addEventListener("submit", function(e) { e.preventDefault(); var input = document.getElementById('files'); var files = input.files; var formData = new FormData(); for (var i = 0; i < files.length; i++) { formData.append("files", files[i]); } var tags = $('#tags').val(); formData.append("tags", tags); const myForm = JSON.stringify(Object.fromEntries(formData)); // will show the files object as empty for (var pair of formData.entries()) { console.log(pair[0]+ ', ' + pair[1].name || pair[1]); } console.log(myForm) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form1"> <div class="form-group"> <div class="buttons"> <div class="upload-button"> <input id="files" name="files" type="file" size="1" /> </div> </div> </div> <div class="form-group"> <label for="tags">Tags:</label> <input type="text" class="form-control" id="tags"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary" id="btnSave">Upload and Save</button> </div> </form>