When creating a FormData object from an existing form, are filenames automatically appended and accessible?

Question

Form

<form id="my_form">
<input type="file" name="my_file">
<input type="text" name="field_one">
<input type="text" name="field_two">
<button>send</button>
</form>

Create FormData Object

var myFormData = new FormData($("#my_form")[0]);

Question

Is the filename of my_file accessible even though it hasn't been specifically defined (for DOM manipulation and inserting into database)?

This states:

You can also append a File or Blob directly to the FormData object, like this:

data.append("myfile", myBlob, "filename.txt");

But it doesn't specify whether a filename is automatically added when creating the FormData object from an existing form.

If it is not automatically appended, is the only option to manually create a FormData object through multiple append() statements in which case filename definition is possible?

Answer 1

It seems the filename is automatically added (just tested in Chrome and not sure if this differs in other circumstances).

Steps To Reproduce

• Go to http://jsfiddle.net/rwone/vsRSf/
• Open Network tab in Developer Tools
• Select two images and click the button
• View the Network tab and you will see the filenames are defined

The image information is only defined with two parameters, and not the third filename parameter:

myFormData.append(name, file);

Original fiddle based on this post:

https://stackoverflow.com/a/21901886/1063287