In this post you will learn how to Upload image in Laravel 8, here we will create sample project to show upload image process in Laravel 8 and show image to frontend.
Create Laravel project:
composer create-project laravel/laravel image-upload
Move to project folder:
cd image-upload
Set up database configuration:
You can use any local web server for setting up application. In this tutorial we use xamp local server.set up database configuration in .env file.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=image-upload DB_USERNAME=root DB_PASSWORD=
Create model & migration:
Run following command in command prompt to create model & migration:
Php artisan make:model image -m
After that set up function up() in database/migration/create_images_table file.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateImagesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('name')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('images');
}
}Set up fillable property true in app/model/image.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class image extends Model
{
use HasFactory;
protected $fillable=['name'];
}Now you need to run migration using following command:
php artisan migrate
You can see the list of tables in your phpmyadmin panel or database.
Create controller for image upload:
Run the following command to create a controller.
php artisan make:controller imageuploadcontroller
Set up controller in app/http/controller/imageuploadcontroller.php
<?php
namespace App\Http\Controllers;
use App\Models\image;
use Illuminate\Http\Request;
class imageuploadcontroller extends Controller
{
public function index()
{
return view('image');
}
public function imageupload(Request $request)
{
//upload the image to storage
$imageName=time().'.'.$request->image->extension();
$image=$request->image->storeAs('public/postsimages', $imageName);
//store image name
$imagedata = new image;
$imagedata->name = $imageName;
$imagedata->save();
session()->flash('success','image upload successfully');
return redirect('upload-image');
}
}
Create Route:
Open web.php file from routes directory and set following routes:
<?php
use App\Http\Controllers\imageuploadcontroller;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', [imageuploadcontroller::class, 'index']);
Route::post('save', [imageuploadcontroller::class, 'imageupload']);Create Blade Template:
Create a blade file, named it image.blade.php into resources/views,and add the following code in to file.
<!DOCTYPE html>
<html>
<head>
<title>Uploading Image</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
@if(session()->has('success'))
<div class="alert alert-success">
{{session()->get('success')}}
</div>
@endif
<div class="card">
<div class="card-header text-center font-weight-bold">
<h2>Upload Image</h2>
</div>
<div class="card-body">
<form method="POST" enctype="multipart/form-data" id="upload-image" action="{{ url('save') }}" >
@csrf
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="file" name="image" placeholder="Choose image" id="image">
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>Run the Application:
Now, Start the application By this command.
Php artisan serve
Output:
Here you can find full code for upload image : https://github.com/gvtechnolab/laravel8-image-upload.git
If you need more guide for query you can feel free to contact us
