Image Upload in Laravel Tutorial From Scratch. Today In this tutorial, we will learn how to upload image or file in laravel application step by step simple and easy way. We will upload image with live preview and validate file or image type in laravel app. We will also validate file with laravel validator and store the image to database and folder.
In this tutorial, We will tell you each thing about images/files upload in laravel app. Just follow few steps and upload file in folder laravel app .
Contents
- Install Laravel App
- Setup Database
- Make Route
- Create Controller & Methods
- Create Blade View
- Make Folder
- Start Development Server
- Conclusion
Install Laravel App
First of we need to download laravel fresh setup. Use the below command and download fresh new laravel setup :
composer create-project --prefer-dist laravel/laravel ImageUpload
Setup Database
After successfully install laravel Application, Go to your project .env file and set up database credential and move next step :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here
Generate Migration & Model
Now we will create table name Image and it’s migration file. use the below command :
php artisan make:model Image -m
It command will create one model name Image and also create one migration file for Image table. After successfully run the command go to database/migrations file and put the below here :
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateImagesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->increments('id');
$table->string('image');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('images');
}
}
Before we run php artisan migrate command go to app/providers/AppServiceProvider.php and put the below code :
…
use Illuminate\Support\Facades\Schema;
….
function boot()
{
Schema::defaultStringLength(191);
}
…
Next migrate the table using the below command :
php artisan migrate
Make Route
We will create two routes in web.php file. Go to app/routes/web.php file and create two below routes here :
Route::get('image', 'ImageController@index');
Route::post('save', 'ImageController@save');
Create Controller
We need to create a controller name ImageController. Use the below command and create Controller :
php artisan make:controller ImageController
After successfully create controller go to app/controllers/ImageController.php and put the below code :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator,Redirect,Response,File;
class ImageController extends Controller
{
public function index()
{
return view('image');
}
public function save()
{
request()->validate([
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
if ($files = $request->file('image')) {
$destinationPath = 'public/image/'; // upload path
$profileImage = date('YmdHis') . "." . $files->getClientOriginalExtension();
$files->move($destinationPath, $profileImage);
$insert['image'] = "$profileImage";
}
$check = Image::insertGetId($insert);
return Redirect::to("image")
->withSuccess('Great! Image has been successfully uploaded.');
}
}
Create Blade view
In this step we need to create blade view file. Go to app/resources/views and create one file name image.blade.php :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel Image Upload Example - Tutsmake.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<style>
.container{
padding: 10%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2 style="margin-left: -48px;">Laravel Image Upload Example - Tutsmake.com</h2>
<br>
<h4>with preview</h4>
<br>
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
<br>
@endif
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Opps!</strong> There were something went wrong with your input.
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
<br>
@endif
<form action="{{ url('save') }}" method="post" accept-charset="utf-8" enctype="multipart/form-data">
@csrf
<div class="avatar-upload col-12">
<div class="avatar-edit">
<input type='file' id="image" name="image" onchange="readURL(this);" accept=".png, .jpg, .jpeg" />
<label for="imageUpload"></label>
<img id="blah" src="//www.tutsmake.com/wp-content/uploads/2019/01/no-image-tut.png" class="" width="200" height="150"/>
</div>
</div>
<div class="avatar-upload col-6">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
<script>
function readURL(input, id) {
id = id || '#blah';
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(id)
.attr('src', e.target.result)
.width(200)
.height(150);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
Start Development Server
We need to start development server. Use the php artisan serve command and start your server :
php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080
Now we are ready to run our example so run bellow command to quick run.
http://localhost:8000/image
Or direct hit in your browser
http://localhost/ImageUpload/public/image
Conclusion
In this tutorial , We have successfully image upload in folder our laravel application. We uploaded the image in database and folder with live preview our examples run quickly.
You may like
- Laravel 6 Upload Images Using Dropzone js Tutorial
- Upload Files/Images to Amazon s3 Cloud Using Laravel 6 Filesystem
- Laravel 6 CKEditor with Images Upload
- Ajax Image Upload in Laravel 6 From Scratch
- Laravel 6 Intervention Upload Image Using Ajax – Example
- Laravel 6 Upload Image to Database with Validation
Rrecommended Posts
example look like this :
If you have any questions or thoughts to share, use the comment form below to reach us.
How can we update multiple image.