title: patchValue just does not work! What does?
body: <p>I have an issue with my image upload feature. On one of the component forms there are 8 entries, 7 text entries and 1 image upload entry. The form submits to my node server fine and all data is present, however the image upload feature only works sometimes.</p>
  
  <p>If I try to select an image first I get the error "Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string." </p>
  
  <pre><code>&lt;button class="btn logo" mat-stroked-button type="button"
     (click)="filePicker.click()"&gt;Pick Image
  &lt;/button&gt;
  &lt;input type="file" #filePicker formControlName="logo"
     name="logo" (change)="onImagePicked($event)" /&gt;
  </code></pre>
  
  <p>I understand that but every example I have seen has the same or similar syntax. Is there more than one way to do this?</p>
  
  <p>If I change the data in 3 of the fields first and then select an image the feature works as expected by uploading the file to multer, adding the filename to the db, and returning the results but I still get the failed to set value error even though it works???? I don't get it. It works but it doesn't.</p>
  
  <pre><code>this.adminSettingsForm.patchValue({'logo': file,}); // doesn't work
  
  this.adminSettingsForm.patchValue({['logo']: file,}); // doesn't work
  
  this.adminSettingsForm.patchValue({[logo]: file,}); // doesn't work
  
  this.adminSettingsForm.controls['logo'].patchValue(file, {emitEvent : false}); // doesn't work
  
  this.adminSettingsForm.get('logo').updateValueAndValidity(); // throws an error because of the above.
  </code></pre>
  
  <p>This is my service that is sending and receiving the right data... all except the image.</p>
  
  <pre><code>updateStoreInfo(
  storeName: string, logo: File, address: string,
  city: string, state: string, zip: string, phone: string, email: string
  ) {
  const formData = new FormData();
  formData.append('storeName', storeName);
  formData.append('logo', logo);
  formData.append('address', address);
  formData.append('city', city);
  formData.append('state', state);
  formData.append('zip', zip);
  formData.append('phone', phone);
  formData.append('email', email);
  
  return this.http.post&lt;{ message: string; settings: Settings }&gt;(`${this.serverUrl}/admin/settings/storeInfo`, formData)
    .subscribe(result =&gt; {
      const resData = result;
      alert(resData['message']);
      const adminSettings = resData['settings'];
  this.settingsChanged(adminSettings);
    });
  </code></pre>
  
  <p>}</p>
  
  <p>And here is my node server function</p>
  
  <pre><code>router.post('/settings/storeInfo', multer({dest: imgDir, storage: 
  imgStorage, fileFilter: fileFilter})
    .fields([
      { name: 'logo', maxCount: 1 },
    ]), (req, res, next) =&gt; {
  
  
    storeSettingsId = req.body.storeSettingsId
    StoreSettings.findById(storeSettingsId)
      .then(settings =&gt; {
        if (req.files.logo) {
          settings.image= req.files.logo[0].filename;
        } else {
          settings.image = settings.image;
        }
  
        settings.storeName = req.body.storeName,
        settings.address = req.body.address,
        settings.city = req.body.city,
        settings.state = req.body.state,
        settings.zip = req.body.zip,
        settings.phone = req.body.phone,
        settings.email = req.body.email,
        settings.save();
  
        return res.status(201).json({ message: 'Settings Saved!', settings });
      })
      .catch(err =&gt; {
        console.log(err);
        const error = new Error(err);
        error.httpStatusCode = 500;
        return next(error);
      });
  
    });
  </code></pre>
  
  <p>I have 6 more forms like this one each with different numbers of image uploads. From 1 image to 20. When I submit a form with more than one image the last image is ignored. I've been trying to figure this out for over a week and I think I'm stuck. I can't figure it out and I'm out of liquor! Someone please give me a solution that I haven't googled already that works.</p>
  
  <p>UPDATE: 
  I have updated my code above and have rebuilt my form and have tried the following lines:
      this.adminSettingsForm.patchValue({ 'logo': file });
      // doesn't work - Failed to set the 'value' property... (console)</p>
  
  <pre><code>   this.adminSettingsForm.patchValue({'logo': file, });
  // doesn't work with trailing comma - Failed to set the 'value' property... (console)
  
     this.adminSettingsForm.patchValue({['logo']: file, });
  // doesn't work - Failed to set the 'value' property... (console)
  
     this.adminSettingsForm.patchValue({[logo]: file, });
  // doesn't work - did I mean this.logo(IDE) - logo not defined(console)
  
     this.adminSettingsForm.controls['logo'].patchValue(file);
  // refErr 'logo is not defined'
  
     this.adminSettingsForm.controls['logo'].patchValue(file, {emitEvent : false});
  // dooesn't work - Failed to set the 'value' property... (console)
  
     this.adminSettingsForm.controls['logo'].value = file;
  // Cannot assign to 'value' because it is a read-only property. Breaks build but not error in console
  
     this.adminSettingsForm.value['logo'].value = file; // doesn't work
  </code></pre>
  
  <p>Every part of this feature works except updating the file value entered. Does anyone have any idea why this is happening. I'm at a complete loss and I keep coding in circles.</p>