How to Upload Image Files with Laravel 7 and Angular 9?


What are the exact steps required for implementing the functionality for uploading image files from an Angular 9 frontend interface to a Laravel 7/6 backend? 

February 27, 2020

These are the steps for creating a simple example for uploading image files with Angular 9 and Laravel 6/7,


First, run these commands to install Angular 9 CLI and create a project:


$ npm install -g @angular/cli 
$ ng new angular-laravel-upload

Next, open the src\app\app.module.ts file and import HttpClientModule and ForrnsModule:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { FormsModule }   from '@angular/forms';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }


Next, open the src\app\app.component.ts file and update it as follows:


import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {NgForm} from '@angular/forms';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'angularlaraveluploadimage';
        this.filedata =[0];
  constructor(private http: HttpClient) {

   onSubmit(f: NgForm) {
            var myFormData = new FormData();
            const headers = new HttpHeaders();
          headers.append('Content-Type', 'multipart/form-data');
          headers.append('Accept', 'application/json');
    	    myFormData.append('image', this.filedata);'http://localhost/blog/public/api/sample-restful-apis', myFormData, {
  headers: headers
}).subscribe(data => {


Next. open the src/app/app.component.html file and add a form:


<form #f="ngForm" (ngSubmit)="onSubmit(f)">
<input type="file" #fileupload [(ngModel)]="myFile" name="myFile" (change)="fileEvent($event)"/>
<button>Upload Image</button>

That's all for the Angular part, run the ng serve commad to serve your app.


For the Laravel 6/7 part, create a project and add a new route in the routes/api.php file:

Route::post("/sample-restful-apis" , "Controller@uploadimage");

Next, add a controller in the app\Http\Controllers\Controller.php file and update it as follws:


namespace App\Http\Controllers;

use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Routing\Controller as BaseController;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Http\Request;

class Controller extends BaseController
    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
    public function uploadimage(Request $request)
      if ($request->hasFile('image'))
            $file      = $request->file('image');
            $filename  = $file->getClientOriginalName();
            $extension = $file->getClientOriginalExtension();
            $picture   = date('His').'-'.$filename;
            $file->move(public_path('img'), $picture);
            return response()->json(["message" => "Image Uploaded Succesfully"]);
            return response()->json(["message" => "Select image first."]);

Finally run the backend using artisan serve command,


February 27, 2020
Skip to toolbar