'Cannot get file of FormData (angular 13) from Symfony 5.4

I hope you are fine,

I have a problem to get file of FormData in Angular 13 send to Symfony 5.4.

onFileSelected1(event:any){
 

       const file:File = event.target.files[0];
        let formData = new FormData();
    
        formData.append("filephotoverif",file);
        for (var [key, value] of formData.entries()) {
          console.log(key, value);
        }
        this.userService.validateUser(formData,this.UserId).subscribe(m => {this.onUploadRefresh();});
      }


  public validateUser(data: any, id:number):  Observable<User[]>
  {
    return this.server.postbis<any>('personne/imageverif/'+id, data).pipe(
      map(res => res),
      catchError(err =>
        {

          return [];
        })
    );
  }

public postbis<T>(url: string, body: T, secure:boolean=true): Observable<any>
{
  if(secure){
    let token=sessionStorage.getItem('id_token');
    let headers = new HttpHeaders();
if (typeof token === 'string'){
   headers = new HttpHeaders()
    .set('Content-Type', 'multipart/form-data').set('Authorization', 'Bearer ' + token ).set( 'method' , 'POST');
  }
  return this.call(() =>this.http.post(this.BASE_URL + url, body,  {'headers':headers}));
 }
 else{
  return this.http.post(this.BASE_URL + url, body);
 }
}

I have the resource|string with a $request->getContent(),so before that was working to get a file with $fileversocarteid=$req->files->get('fileversocarteid');.but not now, it give me a null. And the dump of my Request donot reveale any files, query or request.

Symfony\Component\HttpFoundation\Request {#51 ▼
  +attributes: Symfony\Component\HttpFoundation\ParameterBag {#93 ▶}
  +request: Symfony\Component\HttpFoundation\InputBag {#99 ▼
    #parameters: []
  }
  +query: Symfony\Component\HttpFoundation\InputBag {#94 ▼
    #parameters: []
  }
  +server: Symfony\Component\HttpFoundation\ServerBag {#90 ▼
    #parameters: array:113 [▶]
  }
  +files: Symfony\Component\HttpFoundation\FileBag {#91 ▼
    #parameters: []
  }
  +cookies: Symfony\Component\HttpFoundation\InputBag {#92 ▼
    #parameters: []
  }
  +headers: Symfony\Component\HttpFoundation\HeaderBag {#89 ▼
    #headers: array:20 [▶]
    #cacheControl: []
  }
  #content: null
  #languages: null
  #charsets: null
  #encodings: null
  #acceptableContentTypes: null
  #pathInfo: "/api/personne/imageverif/5"
  #requestUri: "/api/personne/imageverif/5"
  #baseUrl: ""
  #basePath: null
  #method: "POST"
  #format: "json"
  #session: Closure() {#202 ▶}
  #locale: null
  #defaultLocale: "en"
  -preferredFormat: null
  -isHostValid: true
  -isForwardedValid: true
  -isSafeContentPreferred: null
  basePath: ""
}

That's my console.log of my FormData (Angular 13)

filephotoverif 
File {name: 'IMG-20211220-WA0001.jpg', lastModified: 1640009345334, lastModifiedDate: Mon Dec 20 2021 15:09:05 GMT+0100 (heure normale d’Europe centrale), webkitRelativePath: '', size: 177618, …}
lastModified: 1640009345334
lastModifiedDate: Mon Dec 20 2021 15:09:05 GMT+0100 (heure normale d’Europe centrale) {}
name: "IMG-20211220-WA0001.jpg"
size: 177618
type: "image/jpeg"
webkitRelativePath: ""
[[Prototype]]: File

And that's my resource|string with dump($req->getContent())

b"------WebKitFormBoundaryEXJJL0VPLSS5ODRtContent-Disposition: form-data; name="filephotoverif"; filename="IMG-20211220-WA0001.jpg"Content-Type: image/jpeg Ï Ó\x00\x10JFIF\x00\x01\x01\x01\x00`\x00`\x00\x00 ß\x00"Exif\x00\x00MM\x00*\x00\x00\x00\x08\x00\x01\x01\x12\x00\x03\x00\x00\x00\x01\x00\x01\x00\x00\x00\x00\x00\x00 █\x00C\x00\x02\x01\x01\x02\x01\x01\x02\x02\x02\x02\x02\x02\x02\x02\x03\x05\x03\x03\x03\x03\x03\x0...etc

I have use php 8.1.1, 8.0.14 and now 7.4.27 same bug.

Maybe it's the bcrypt module that I have add to angular, that said that provock some bug, I don't know.

Thank you for your attention.

Solution 1:^[1]

I come back to you, so I did a lot of stuff so I don't know what solved the problem, while knowing that the last thing I changed was, to delete the set('Content-Type', 'multipart/form-data') and I also put symfony on https server. In addition to all the version changes of php and symfony. If anyone knows what solved the problem, I'd love to listen.

Solution 2:^[2]

In fact for me, it started to works when I added the Content-type multipart/formdata (I had a JWT interceptor that was setting up my content-type as application/json).

If it can helps in any way...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Bilal Mimouni
Solution 2	Maxime Dessez

'Cannot get file of FormData (angular 13) from Symfony 5.4

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]