title: Upload file in Angular 4 and pass it to php file
body: <p>I'm trying to upload file in Angular 4 and send it to php with another data like text, when I use var_dumb() to read the data the File Object empty.</p>
  
  <p>My <code>post.component.html</code>:</p>
  
  <pre><code>&lt;a class="upload-photo-item"&gt;
              &lt;input type="file" class="Upload-photo" accept="image/*" ngf-max-size="2MB" (change)="handleInputChange($event)"/&gt;
              &lt;i class="fa fa-tags olymp-computer-icon" aria-hidden="true"&gt;&lt;/i&gt;
  
              &lt;h6&gt;Upload Photo&lt;/h6&gt;
              &lt;span&gt;Browse your computer.&lt;/span&gt;
          &lt;/a&gt;
  </code></pre>
  
  <p>And this is <code>handleInputChange</code> function:</p>
  
  <pre><code>    post = new PostObject();
      image: File;
  
   handleInputChange(event) {
          console.log(event);
          this.image = event.target.files[0];
  
          var pattern = /image-*/;
  
          if (!this.image.type.match(pattern)) {
              console.log('File is not an image');
              return;
          }
          this.post.postPhoto = this.image;
  
          console.log('image :' + this.image);
    }
  </code></pre>
  
  <p>Everything until now is perfect, I can see my Object file in console, Now here is the problem:</p>
  
  <p>My <code>post.php</code>:</p>
  
  <pre><code>$data = json_decode(file_get_contents('php://input'), true);
  var_dump($data);
  exit;
  </code></pre>
  
  <p>The API response with array(0) like this:
  <a href="https://i.stack.imgur.com/G2hig.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G2hig.png" alt="enter image description here"></a></p>
  
  <p>It can be solved by <code>base64</code> but this is not an option for me, any ideas please?</p>