title: Angular 4 upload to Symfony REST Api
body: <p>I want to implement a file upload (within a reactive form), but <code>$request-&gt;files-&gt;all()</code> (from Symfony) is always empty.</p>
  
  <p>My form:</p>
  
  <pre><code>    &lt;form [formGroup]="form" (ngSubmit)="onSubmit()"&gt;
  &lt;div class="col-md-6"&gt;
                          &lt;input type="text" pInputText id="name" formControlName="name"&gt;
                          &lt;label for="name"&gt;Name&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6"&gt;
                          &lt;input type="file" id="file" (change)="upload($event)"&gt;
                  &lt;/div&gt;
    // ... remaining form
    &lt;button pButton type="button" (click)="onSubmit()" [disabled]="form.invalid" label="Save"&gt;&lt;/button&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>The relevant TS code:</p>
  
  <pre><code>// Form creation
  createForm() {
      this.form = this.fb.group({
        name: ['', Validators.required],
        description: '',
        file: [null, Validators.required],
        watermark: false
      });
    }
  </code></pre>
  
  <p>For uploading:</p>
  
  <pre><code>upload(event) {
      let file = event.target.files[0];
      this.form.controls['file'].setValue(file);
    }
  </code></pre>
  
  <p>On submit:</p>
  
  <pre><code>onSubmit() {
      this.http.post('api/file', this.form.value).subscribe((data) =&gt; {
        console.log(data);
      });
    }
  </code></pre>
  
  <p>Looking at the <code>Request $request</code> object server-side everything's fine, except the file which is empty: <code>$request-&gt;files-&gt;get('file')</code> is always <code>[]</code>.</p>
  
  <p>Anyone got an idea why?</p>