Angular Php File Upload Issue

Question

This is the basic file upload I am trying using angular and php. When I choose the file in UI, I can see the file details.

But, when I execute it I am getting empty array as response in network tab.

What might be the issue?

I have checked php.ini file and everything seems fine to me.

(I also tried to print using print_r ($_FILES); It gives empty array.)

I have attached Angular(.html, .ts) and .php file here:

<?php
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Headers: *");
        echo ($_POST['file']);
?>

    <form [formGroup]="myForm" (ngSubmit)="submit()" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="file">File</label>
            <input 
                formControlName="file"
                id="file" 
                type="file" 
                class="form-control"
                (change)="onFileChange($event)">
        </div>
        <button class="btn btn-primary" type="submit">Submit</button>
    </form>

    myForm = new FormGroup({
      file: new FormControl('', [Validators.required]),
      fileSource: new FormControl('', [Validators.required])
    });
        
    constructor(private http: HttpClient) { }
      ngOnInit(): void {
    }
    
    get f(){
      return this.myForm.controls;
    }
       
    onFileChange(event) {
      if (event.target.files.length > 0) {
        const file = event.target.files[0];
        console.log('File', file);
        this.myForm.get('fileSource').setValue(file);
      }
    }

    submit(){
      const formData = new FormData();
      formData.append('file', this.myForm.get('fileSource').value);

      this.http.post('http://localhost/]api/document/SaveContact.php', formData)
        .subscribe(res => {
          console.log(res);
          // alert('Uploaded Successfully.');
        })
      }
    }

Tried to print using print_r ($_FILES); It gives empty array. — Raahul
– Raahul, Commented Nov 2 at 10:40
$_POST['file'] will never work for a file upload, it'll always be in $_FILES if it's there. Does the network tool show the file being successfully sent in the request payload? — ADyson
– ADyson, Commented Nov 2 at 13:38
[Just wonder] Are you sure there is a "]" in this URL ? http://localhost/]api/document/SaveContact.php — Ken Lee
– Ken Lee, Commented Nov 3 at 0:14
Check the network tab to see if a request was made and if it had the file in the payload. Also check your server logs and error files. — Musa
– Musa, Commented Nov 3 at 5:03
I think i found problem. this.myForm.get('fileSource').value is file path but FormData.append second parameter is actual value to send with request. use this.myForm.get('fileSource').files[0] as File or create FormData by const formData = new FormData(this.myForm) if this.myForm is HTMLFormElement. — Jakkapong Rattananen
– Jakkapong Rattananen, Commented Nov 4 at 10:07

Vikram Srivastava · Accepted Answer · 2025-11-02 17:35:46Z

-1

In your PHP code:
echo ($_POST['file']);

You're trying to read the uploaded file using $_POST['file'].

But uploaded files do not go into $_POST.

They go into the $_FILES superglobal array in PHP.

So, even if everything is correct on the Angular side, $_POST['file'] will always be empty.

Use the given PHP Code:

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");

if (isset($_FILES['file'])) {
    $file = $_FILES['file'];
    echo json_encode([
        'name' => $file['name'],
        'type' => $file['type'],
        'size' => $file['size'],
        'tmp_name' => $file['tmp_name']
    ]);
} else {
    echo json_encode(['error' => 'No file uploaded', 'files' => $_FILES]);
}
?>

That will correctly show you what PHP receives.

answered Nov 2 at 17:35

Vikram Srivastava

376 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ADyson Nov 2 at 18:44

OP already stated that $_FILES is also empty, so it's unclear how this answer helps

traynor Nov 3 at 8:21

probably LLM generated

ADyson Nov 4 at 9:42

Also why not just do echo json_encode($file); then you see the whole array entry - incuding the error code, which might be useful if something has gone wrong! Don't think this answer has been thought through. I agree it does smell like it might be AI slop - if not then it's a bit careless. Either way it's at best redundant, at worst not as helpful as it could be.

Collectives™ on Stack Overflow

Angular Php File Upload Issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related