title: How to submit data from an Angular2 form (along with image) to PHP using formdata method?
body: <p>The form has text input and file-input. I studied the tutorial from <a href="https://nehalist.io/uploading-files-in-angular2/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>This is my <strong>add.component.ts</strong> file:-</p>
  
  <pre><code>import { AdminPage } from '../../../_models/admin.page.model';
  import { AdminPageService } from '../../../_admin_service/admin.page';
  import { ImageUploadService } from '../../../_common_service/image.upload';
  
  
  export class AddComponent implements OnInit, AfterViewInit {
      .............
      .............
  
      adminPageModel = new AdminPage('', '', '', '','');  
  
      constructor(private route: ActivatedRoute,
          private router: Router,
          private _adminPage: AdminPageService,
          private _imageUpload: ImageUploadService,
          fb: FormBuilder,
          private _flashMessagesService: FlashMessagesService) { 
              this.addPageFormGroup = fb.group({
                'title' : [null, Validators.compose([Validators.required])],
                'meta_keyword': [null, Validators.required],
                'meta_description': [null, Validators.required],
                'image':[],
                'desc': [null, Validators.required]
              });
      }
  
  
      formImageUpload(event){
          this._imageUpload.onFileChange(event,this.addPageFormGroup);
      }
  
      submitAddPage(value:any){    
          this.addPageFormGroup.get('desc').setValue($('.Editor-editor').html());
          const adminPageModule = this._imageUpload.prepareSave(this.addPageFormGroup);
          this._adminPage.postAdminPageAdd(adminPageModule).subscribe(
            data =&gt; {
                  this.responseStatus = data;
                  if(this.responseStatus.status == 1)
                  {
                    this._flashMessagesService.show(this.responseStatus.message, { cssClass: 'alert-success', timeout: 2000 });
                  }
                  else
                  {
                    this._flashMessagesService.show(this.responseStatus.message, { cssClass: 'alert-danger', timeout: 2000 });
                  }
                },
            err =&gt; {
                  console.log(err)
                },
            () =&gt; {}
          ); 
        this.status = true;       
      }
  }
  </code></pre>
  
  <p>This is the <strong>image.upload.ts</strong> service file, where we are setting the formdata from the form:-</p>
  
  <pre><code>@Injectable()
  export class ImageUploadService {
      constructor() {}
  
      onFileChange(event, formHasImage:any) {
          if(event.target.files.length &gt; 0) {
              let file = event.target.files[0];
              formHasImage.get('image').setValue(file);
          }
      }
  
      prepareSave(formHasImage): any {
          let input = new FormData();
          input.append('image', formHasImage.get('image').value);
          input.append('title', formHasImage.get('title').value);
          input.append('desc', formHasImage.get('desc').value);
          input.append('meta_keyword', formHasImage.get('meta_keyword').value);
          input.append('meta_description', formHasImage.get('meta_description').value);
          console.log(input);
          return input;
      }
  }
  </code></pre>
  
  <p>This is the <strong>admin.page.ts</strong> service file where we are hitting the API. This is made by referring to this answer <a href="https://stackoverflow.com/questions/40214772/file-upload-in-angular">here</a>.</p>
  
  <pre><code>@Injectable()
  export class AdminPageService {
      http : Http;
      actionUrl : string;
      admin_page_add_url: string;
      postAdminPageAddData: AdminPage;
      adminPageAddResponse:Object= []; 
  
  
      constructor(public _http: Http) {
         this.http = _http;
         this.admin_page_add_url = 'http://localhost/angproject/phpscript/adminpage2.php';
      }
  
      // The form Data is being sent as parameter
      postAdminPageAdd(postAdminPageAddFormData: any) {   
          let headers = new Headers();
          headers.append('enctype', 'multipart/form-data');
          headers.append('Accept', 'application/json');
          this.actionUrl = this.admin_page_add_url;
          return this.http.post(this.actionUrl, 
                                      { postAdminPageAddFormData },
                                      { headers: headers })
                                  .map(res =&gt; res.json()).share();
      }
  }
  </code></pre>
  
  <p>This is the server side php file where we are sending the data. This is made on the accepted answer <a href="https://stackoverflow.com/questions/42389354/how-to-receive-uploaded-file-from-angular2-in-php-backend">here</a>:-</p>
  
  <pre><code>&lt;?php
  error_reporting(E_ALL);
  header("Access-Control-Allow-Origin: http://localhost:4200");
  header("Access-Control-Allow-Headers: Content-Type, enctype");
  header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
  header('Content-Type: application/json; charset=utf-8');
  header('enctype: multipart/form-data');
  
  include('connection.php');
  $error = array();
  
  if(isset($_FILES['image']))
  {
      $image = 'Image Exists';
  }
  else
  {
      $error[] = "Image was not entered";
      $image = '';
  }
  
  if(isset($_POST['title']) &amp;&amp; !empty($_POST['title']))
      $title = $_POST['title'];
  else 
      $error[] = "Title was not entered";
  
  
  if(empty($error))
  {
      $response['status'] = 1;
      $response['message'] = $image;
      $response['error'] = $conn-&gt;error;
  }
  else
  {
      $response['status'] = 0;
      $response['message'] = "Parameter missing";
      $response['error'] = $error;
  }
  $respond = json_encode($response);
  echo $respond;
  exit;
  ?&gt;
  </code></pre>
  
  <p>My issue is, I am always getting this json response:-</p>
  
  <pre><code>{
    "status": 0,
    "message": "Parameter missing",
    "error": [
      "Image was not entered",
      "Title was not entered"
    ]
  }
  </code></pre>
  
  <p>It seems like the formdata aren't being sent to the server end. What am I doing wrong here? Mind it, I have other process too, to submit the form. But in that case, I can send data to server successfully by not using formdata and hence, I can't implement file-upload in that method.</p>
  
  <p>Note: When I do <code>console.log(input)</code>, I get this:-</p>
  
  <p><a href="https://i.stack.imgur.com/kkOtx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kkOtx.png" alt="enter image description here"></a></p>