Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

AmineF's avatar

FormData is sent empty from Angular to Laravel with multipart/form-data content-type

Hi, I've been enhancing an app with angular and Laravel and there was a form where I'm supposed to send image within the other text data, I ve set up headers to multipart/form-data and implemented the backend as it follows.

let form_data : FormData = new FormData(); form_data.append('first_name', newContactForm.value.first_name); form_data.append('last_name', newContactForm.value.last_name); form_data.append('profile_picture', this.profile_picture, this.profile_picture.name); form_data.append('email', newContactForm.value.email); form_data.append('phone_number', newContactForm.value.phone_number); form_data.append('birthdate', newContactForm.value.birthdate); form_data.append('relationship_id', newContactForm.value.relationship_id); form_data.append('nationality_id', newContactForm.value.nationality_id); form_data.append('gender_id', newContactForm.value.gender_id);

this.storeContact(form_data);

public storeContact(contact_form : FormData) : void { this.contact_service.storeContact(contact_form).subscribe((response : Status) => { ........

public storeContact(contact_form : FormData) : Observable<Status> { return this.http.post<Status>(this.base_url + '/api/store-contact', contact_form); }

Ive set the http headers in an interceptor

intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent> {

const token = localStorage.getItem('token');

if(token) {
  request = request.clone({
    headers : request.headers
      .set('Authorization', 'Bearer ' + token)
      .set('Accept', 'application/json')
      .set('Content-Type', 'multipart/form-data;boundary=§§§')
  });
}

console.log(request);

return next.handle(request);

}

And in Laravel : public function storeContact(ContactFormValidator $request) : Response { ...

public function rules() : array {

    return [

        'first_name' => ['required', 'string', 'alpha', 'min:2', 'max:255', 'bail'],
        'last_name' => ['required', 'string', 'alpha', 'min:2', 'max:255', 'bail'],
        'profile_picture' => ['nullable', 'image', 'mimes:jpg,png,jpeg', 'dimensions:ratio=1/1', 'bail'],
        'email' => ['nullable', 'string', 'email', 'bail'],
        'phone_number' => ['nullable', new IsPhoneNumber(), 'bail'],
        'birthdate' => ['nullable', 'date', 'before:' . now(), 'bail'],
        'gender_id' => ['required', 'gt:0', 'exists:genders,id', 'integer', 'numeric', 'bail'],
        'relationship_id' => ['required', 'gt:0', 'exists:relationships,id', 'integer', 'numeric', 'bail'],
        'nationality_id' => ['required', 'gt:0', 'exists:nationalities,id', 'integer', 'numeric', 'bail']
    ];
}
0 likes
0 replies

Please or to participate in this conversation.