Send image file from angular to php

Question

I'm trying to send image that choose from angular app to my php here is what i do.

 onSubmit(e) {
    e.preventDefault();
       this.submitted = true;
        if (this.profilForm.invalid) {
            return;
        }
                this.email  = this.profilForm.controls['email_txt'].value;

        this.fullname   = this.profilForm.controls['fullname_txt'].value;
        this.address    = this.profilForm.controls['address_txt'].value;
        this.telp       = this.profilForm.controls['telp_txt'].value;

        this.profilapi.updateProfil( this.fullname, this.address , this.telp , this.email, this.selectedFile ).subscribe((data:  Array<object>) => {
                this.userinfo  =  data;
                console.log( "blablabla - " + this.userinfo);
                this.alertService.danger("Something wrong please try again later");

       },
       error => {               
                console.log( "err - " + error );
                this.alertService.danger("Something error, please try again later");
            }
       );

  }

    onFileChanged(event) {
        this.selectedFile = event.target.files[0]
    }

my service

updateProfil(fullname,address,telp,email,profil){
        return  this.httpClient.post(
                `${this.API_URL}` , 
                {   
                    "fullname" : fullname, 
                    "address" : address , 
                    "telp" : telp , 
                    "email" : email , 
                    "profil" : profil
                } 
                );
    }

ini here is my php so far.

<?php

include_once("Crud.php");
$crud = new Crud();

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

$postdata   = file_get_contents("php://input");
$request    = json_encode($postdata);
$email      = $request->email;
$fullname   = $request->fullname;
$address    = $request->address;
$phone      = $request->phone;
echo $email;
?>

how can i receive the image at my php and upload it to specified folder ? thanks in advance and sorry for my english.

Answer 1

You are trying to get file data via php://input but documentation warning us that this way is not avaliable for enctype="multipart/form-data" forms, so you have to use $_POST array.

Also if you send POST request to PHP script, all uploaded files do not placed into $_POST array, they are placed into the $_FILES array and than you have to move them with yourself:

$uploads_dir = '/uploads';
foreach ($_FILES["pictures"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $tmp_name = $_FILES["pictures"]["tmp_name"][$key];
        // basename() may prevent filesystem traversal attacks;
        // further validation/sanitation of the filename may be appropriate
        $name = basename($_FILES["pictures"]["name"][$key]);
        move_uploaded_file($tmp_name, "$uploads_dir/$name");
    }
}

More info here: http://php.net/manual/en/features.file-upload.php

Answer 2

This is how I upload files from Angular to PHP : (This is not the optimal solution but it works just fine)
1- Read the file from the input and put it in json object:

readFile(event){
        let reader = new FileReader();
        if(event.target.files && event.target.files.length > 0) {
            let file:File = event.target.files[0];
            reader.readAsDataURL(file);
                reader.onload = () => {
                    let fielToUpload = {
                        fileName: file.name,
                        fileType: file.type,
                        fileExtension: file.name.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);,
                        value: reader.result.split(',')[1]
                    };
                    this.profilapi.updateProfil(fielToUpload).subscribe(res => // do whatever you want here);
                };
        }
    }

2- In your service

updateProfil(fielToUpload: any): Observable<any>{
        let _headers = new HttpHeaders({
            'Content-Type': 'application/json',
        });
        return this._http.post('path/to/your/api', fielToUpload, {headers: _headers})
    }

3- Read the object from your php file:

 $postdata   = file_get_contents("php://input");
    $data    = json_encode($postdata);
    $fileName = time().'.'.$data['fileExtension'];
    $path = '/path/to/upload/directory/'.$fileName;
    file_put_contents($path, base64_decode($data['value']));

Answer 3

If you want send image or file with data you must use FormaData object for example :

 public postFile(data: any) { const endpoint ='url' const formData: FormData = new FormData(); formData.append('image', data.file, data.file.name); formData.append('type', data.type); formData.append('label', data.label); formData.append('profile', data.label); let headers = new HttpHeaders(); headers = headers.set('Content-Type', 'multipart/form-data'); headers = headers.set('Accept', 'application/json'); return this._http .post(endpoint, formData, { headers: headers }) }