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()
        }
    }
);

mplungjan · Accepted Answer · 2020-09-22T06:57:05.550

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>

what do you mean `EITHER use a type=button OR use the submit event and prevent it`? to prevent what? — Steve, Sep 22 '20 at 06:43
You want to AJAX the form, not submit it. So you want to prevent the form submission. — mplungjan, Sep 22 '20 at 06:56

Empty object in Javascript FormData object

1 Answers1