title: How do I check if a FormData file is empty?
body: <p>I'm creating an AJAX form which includes the option to either specify a background color or upload a background image.  The goal is for the <code>bgColor</code> field to be ignored if a file has been specified for the <code>bgImg</code> field.</p>
  
  <pre><code>&lt;label&gt;Color: &lt;input type="color" name="bgColor" value="#000000"&gt;&lt;/label&gt;&lt;br&gt;
  &lt;label&gt;Image: &lt;input type="file" name="bgImg" accept="image/png"&gt;&lt;/label&gt;&lt;br&gt;
  </code></pre>
  
  <p>I figured the easiest way to collect the form data is, of course, using the FormData API:</p>
  
  <pre><code>var fd = new FormData(document.getElementById('myForm'));
  </code></pre>
  
  <p>The problem is, I don't know how to check the FormData object for whether or not a file has been selected.  Whether or not the file input is empty, <code>fd.has('bgImg')</code> returns true because the field is present--okay, that's sensible. </p>
  
  <p>But although <code>fd.get('bgImg')</code> works fine if a file <em>has</em> been specified, and I can then verify the positive case, when the file input is empty that same line straight up crashes my browser!  (I've only checked in Firefox, but it happens consistently whether in my actual script or from the browser console.)  Unfortunately a "check whether there's a file" operation that is recognizable but undecidable is effectively useless.  So how am I supposed to figure out if the <code>bgImg</code> field is empty?</p>
  
  <p>I realize I can also just check the form's <code>elements['bgImg'].files</code> object, but the FormData API is already there, and it's neater, and it <em>would</em> be easier if it weren't apparently fatally borked!  So am I missing something?  If this is somehow the wrong way to use the putatively convenient FormData object, then what the hell am I supposed to be doing instead?  Is checking the <code>files</code> collection actually the only solution?</p>
  
  <p>EDIT: Further investigation reveals that this API has pretty poor support in browsers other than Firefox, so actually checking <code>element.files</code> is probably the better solution.  I'm still baffled as to why this would be crashing the browser in Firefox, though.  If an answer on that front is not shortly forthcoming, I'll probably submit my own answer.</p>