How do I check if a FormData file is empty?

Question

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 bgColor field to be ignored if a file has been specified for the bgImg field.

<label>Color: <input type="color" name="bgColor" value="#000000"></label><br>
<label>Image: <input type="file" name="bgImg" accept="image/png"></label><br>

I figured the easiest way to collect the form data is, of course, using the FormData API:

var fd = new FormData(document.getElementById('myForm'));

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, fd.has('bgImg') returns true because the field is present--okay, that's sensible.

But although fd.get('bgImg') works fine if a file has 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 bgImg field is empty?

I realize I can also just check the form's elements['bgImg'].files object, but the FormData API is already there, and it's neater, and it would 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 files collection actually the only solution?

EDIT: Further investigation reveals that this API has pretty poor support in browsers other than Firefox, so actually checking element.files 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.

Answer 1

This behavior of the FormData API in Firefox seems like it may be a bug, unfortunately. However, given the rather minimal support for the FormData methods across browsers, the better solution is probably to check the form elements anyway:

var formFields = document.getElementById('mandelForm').elements;
console.log(formFields['bgImg'].files.length > 0); // True if file selected