Angular PHP使用文件发送名称

Question

Im following some tutorial to upload file on server by php api. I need to send some data with file. Like with file i want to send a name. So it will generate folder by that name and save file in that folder.

home.ts

  onFileSelect(event) {
    if (event.target.files.length > 0) {

      const file = event.target.files[0];
      this.form.get('avatar').setValue(file);
    }
  }

  onSubmit() {
  console.log(this.backUrl);
 name = this.backUrl;
  console.log(name);
    const formData = new FormData();
    formData.append('avatar', this.form.get('avatar').value);

    this.uploadService.uploadFile(formData).subscribe(
      (res) => {
        this.uploadResponse = res;
          console.log(res);
      },
      (err) => {  
        console.log(err);
      }
    );
  }

service.ts

  public uploadFile(data,) {
    let uploadURL = 'http://api.igiinsurance.com.pk:8888/file_upload/upload.php';
    return this.httpClient.post<any>(uploadURL, data);
  }

upload.php

<?php 


header('Content-Type: application/json; charset=utf-8');
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");

$response = array();
$upload_dir = 'uploads';
$server_url = 'http://api.igiinsurance.com.pk:8888';
if($_FILES['avatar'])
{
    $avatar_name = $_FILES["avatar"]["name"];
    $avatar_tmp_name = $_FILES["avatar"]["tmp_name"];
    $error = $_FILES["avatar"]["error"];
    if($error > 0){
        $response = array(
            "status" => "error",
            "error" => true,
            "message" => "Error uploading the file!"
        );
    }else 
    {
        $random_name = rand(1000,1000000)."-".$avatar_name;
        $upload_name = $upload_dir.strtolower($random_name);
        $upload_name = preg_replace('/\s+/', '-', $upload_name);

        if(move_uploaded_file($avatar_tmp_name , $upload_name)) {
            mkdir("upload/testing3");

            $response = array(
                "status" => "success",
                "error" => false,
                "message" => "File uploaded successfully",
                "url" => $server_url."/".$upload_name
              );
        }else
        {
            $response = array(
                "status" => "error",
                "error" => true,
                "message" => "Error uploading the file!"
            );
        }
    }

}else{
    $response = array(
        "status" => "error",
        "error" => true,
        "message" => "No file was sent!"
    );
}
echo json_encode($response);
?>

I want to send name with file. And in php that name will be the folder of that file. Example All files are now saving in ""uploads"" folder. I need file save in upload>name>file-here. Any one can help in code so please

Answer 1

handleInputChange(event: any) { const image = event.target.files[0];

const reader = new FileReader();
if (!image.type.match(/image-*/)) {
  this.Toastr.error('Image are not valid.', 'Failed!');
  return;
} else {
  this.photo = image;

  reader.onload = (event1: ProgressEvent) => {
    this.url = (<FileReader>event1.target).result;
  };
  reader.readAsDataURL(event.target.files[0]);
  this.selectedFile = event.target.files[0];
  this.validateImage = false;

}

} this.ServiceName.saveNewsData("api_url", this.selectedFile).subscribe((response: any) => { if (response.status == true) {}})

saveNewsData(url, photo) {

const data = new FormData();

data.append('featuredImage', photo);

  return this.http.post(url, data,{ headers: header })
  .map(response => response)
  .catch(this.handleError);

}