4

I want to implement a file upload (within a reactive form), but $request->files->all() (from Symfony) is always empty.

My form:

    <form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="col-md-6">
                        <input type="text" pInputText id="name" formControlName="name">
                        <label for="name">Name</label>
                </div>
                <div class="col-md-6">
                        <input type="file" id="file" (change)="upload($event)">
                </div>
  // ... remaining form
  <button pButton type="button" (click)="onSubmit()" [disabled]="form.invalid" label="Save"></button>
 </form>

The relevant TS code:

// Form creation
createForm() {
    this.form = this.fb.group({
      name: ['', Validators.required],
      description: '',
      file: [null, Validators.required],
      watermark: false
    });
  }

For uploading:

upload(event) {
    let file = event.target.files[0];
    this.form.controls['file'].setValue(file);
  }

On submit:

onSubmit() {
    this.http.post('api/file', this.form.value).subscribe((data) => {
      console.log(data);
    });
  }

Looking at the Request $request object server-side everything's fine, except the file which is empty: $request->files->get('file') is always [].

Anyone got an idea why?

nehalist
  • 1,434
  • 18
  • 45
  • check this.https://stackoverflow.com/questions/40214772/file-upload-in-angular-2 – Sathish Kotha Aug 03 '17 at 09:57
  • Sadly I didn't find any help there - my problem still exists. I don't want to upload on change of the file input and I want to maintain the reactive form. – nehalist Aug 03 '17 at 12:19
  • @SathishKotha Your link is only about how to upload file in angular 2 but actually there is nothing about retrieving the file on the symfony back-end. – Jason Liu Sep 28 '18 at 16:54

1 Answers1

2

One solution to this is not to use formGroup but to get the file from $event. I found the form doesn't keep the file property but only the path string.

I can show you an example with uploading multiple files at once. The HTML:

<form>
    <input placeholder="BRD File"
           type="file"
            (change)="setBrd($event.target.files[0])">
    <input placeholder="SCH File"
           (change)="setSch($event.target.files[0])"
           type="file">
    <button (click)="uploadFiles()">
        Test
    </button>
</form>

Then the Typescript part would be like:

public brd: File;
public sch: File;

public setBrd(file: File) {
    this.brd = file;
}

public setSch(file: File) {
    this.sch = file;
}

public uploadCadFiles(id: ServerID, brd: File, sch: File): Observable<Blob> {
    const data = new FormData();
    data.append('brd', brd);
    data.append('sch', sch);
    return this.httpClient.post(`your-url`, data, {
        responseType: 'blob',
    });
}

On Symfony side would be:

public function handleRequest(YourModule id, Request $request)
{
    if ($request->files->get('brd') && $request->files->get('sch')) {
        $brdContent = file_get_contents($request->files->get('brd'));
    }
}
Jason Liu
  • 749
  • 4
  • 16
  • 34