title: How to upload image form angular 5 to laravel storage?
body: <p>I have an Angular 5 app, and in one of my component, I have a file input with name="logo", and I created a method to create a FormData when the input is change. I have an upload button in the same component and the click event is call the this.http.post(.../logo, FormData, {the header}).
  In the laravel I have a LogoController with this method:</p>
  
  <pre><code>&lt;?php
  namespace App\Http\Controllers;
  
  use Illuminate\Http\Request;
  use Illuminate\Support\Facades\Storage;
  use Illuminate\Support\Facades\File;
  
  class LogoController extends Controller{
  
      public function postLogo(Request $request){
         $file = $request-&gt;file('image');
         $filename = 'test.jpg';
         if($file){
             Storage::disk('local')-&gt;put($filename, File::get($file));
         }
         return response()-&gt;json(['file' =&gt; $file], 201);
      }
  }
  </code></pre>
  
  <p>And this does not work. How to do this properly?</p>
  
  <p><strong>Edited:</strong>
  Angular code:</p>
  
  <p>logo.component.html:</p>
  
  <pre><code>&lt;h1&gt;Logo upload&lt;h1&gt;
  &lt;input type="file" name="logo" (change)="onFileSelected($event)"&gt;
  &lt;button type="button" (click)="onUploadLogo()"&gt;Upload&lt;/button&gt;
  </code></pre>
  
  <p>logo.component.ts:</p>
  
  <pre><code>import { LogoService } from './../logo.service';
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-logo',
    templateUrl: './logo.component.html',
    styleUrls: ['./logo.component.scss']
  })
  export class LogoComponent{
    logo: FormData;
    constructor(private logoService: LogoService){}
  
    onFileSelected(event){
      const fd = new FormData();
      const selectedFile = &lt;File&gt;event.target.files[0];
      fd.append('logo', selectedFile, selectedFile.name);
      this.logo = fd;
    }
  
    onUploadLogo(): void{
      if(this.logo){
        this.logoService.uploadLogo(this.logo).subscribe(
           res =&gt; {
             console.log(res);
           }
        );
      }
    }
  }
  </code></pre>
  
  <p>logo.service.ts:</p>
  
  <pre><code>uploadLogo(logo: FormData): Observable&lt;any&gt;{
    const headers = new HttpHeaders({'Content-Type': 'application/json'});
    return this.http.post('http://homestead.test/api/logo, logo, {headers: headers});
  }
  </code></pre>