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

0

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
1
0

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';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],
  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';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularlaraveluploadimage';
  filedata:any;
    fileEvent(e){
        this.filedata = e.target.files[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);
      	this.http.post('http://localhost/blog/public/api/sample-restful-apis', myFormData, {
  headers: headers
}).subscribe(data => {
      		console.log(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>
</form>


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:

<?php

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)
    {
      //dd($request->all());
      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"]);
      } 
      else
      {
            return response()->json(["message" => "Select image first."]);
      }
    }
}

Finally run the backend using artisan serve command,

  

February 27, 2020
Skip to toolbar