Angular 4 upload to Symfony REST Api

Question

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?

check this.stackoverflow.com/questions/40214772/file-upload-in-angular-2 — Sathish Kotha
– Sathish Kotha, Commented Aug 3, 2017 at 9: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
– nehalist, Commented Aug 3, 2017 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
– Jason Liu, Commented Sep 28, 2018 at 16:54

Jason Liu · Accepted Answer · 2018-09-28 23:36:44Z

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'));
    }
}

Collectives™ on Stack Overflow

Angular 4 upload to Symfony REST Api

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related