Do you know how to upload image in laravel ? In this tutorial we learn about how to upload image and file in laravel . First you have to install laravel setup in your machine . if not know about how to install laravel setup in you machine . then you follow this tutorial How to install laravel set up in your machine . In this tutorials we have disscuss in brief how to install laravel project .
In this article we learn how to create controller using command . Always remember some thing when you create controller in laravel . The first character of your controller name is capital like Homecontroller .
First Install the laravel project using below command.
composer create-project --prefer-dist laravel/laravel your_project_directory_name
After successfully Install laravel . open your terminal and create Controller using below command .
php artisan make:controller HomeController
Define route
Route::get('/' ,"HomeController@index");
Route::post('upload_image' ,"HomeController@upload_image");
Manage your controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Auth;
use Image;
use Illuminate\Support\Facades\Validator;
class SpecialCondition extends Controller{
public $image_ext = array("jpeg" , "png" , "jpg" , "JPEG" , "PNG" ,"JPG" );
public function index(){
$data['title'] = "jswebsolutions | How to upload image in laravel";
return view("index")->with($data);
}
public function upload_image(Request $request){
$image_path = public_path('storage/');
if(!is_dir($image_path)){ mkdir($image_path, 0755 , true); }
if(!empty($request->image)){
$fileName = md5(time().uniqid()).".".$request->file('image')->getClientOriginalExtension();
$extension = $request->file('image')->getClientOriginalExtension();
if(in_array($extension , $this->image_ext)){
if($request->file('image')->move($image_path , $fileName)){
return redirect()->back()->with(['msg'=>'<div class="notice notice-success">
<strong>Success </strong> Image upload Successful .</div>.']);
}
else{
return redirect()->back()->with(['msg'=>'<div class="notice notice-danger">
<strong>Wrong </strong> Something Went wrong , please try again .</div>.']);
}
}
}
else{ return redirect()->back()->with(['msg'=>'<div class="notice notice-danger">
<strong>Wrong </strong> Please select image !!! .</div>.']); }
}
}
?>
style.css file
.color-red{color: #FF0000;}
.color-green{color: #6cbc42;}
.color-blue{color: #0080c5;}
.color-twitter{color:#00aced;}
.color-facebook{color:#00539f;}
.color-linkedin{color:#0176b5;}
/*NAVBAR STYLES*/
.navbar-border{border-bottom: solid 5px #0080c5;}
.login-panel {
min-width: 250px;
border-top: 14px solid #0080c5;
border-right: 1px solid #0080c5;
border-bottom-right-radius:0.5em;
-moz-border-radius-bottomright:0.5em;
border-bottom: 3px solid #0080c5;
border-left: 1px solid #0080c5;
border-bottom-left-radius:0.5em;
-moz-border-radius-bottomleft:0.5em;
}
.dropdown-header { display: block !imnportant; padding-bottom: 30px; height: 10px; }
.login-header { font-size: 20px; font-weight: bold; display: inline; float: left; }
.forgot-password { font-size: 10px; display: inline; float: right; vertical-align: bottom; padding-top: 10px; }
.center-text { text-align: center; }
.error-message { font-size: 11px; }
index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jswebsolutions.in | How to image upload in laravel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="http://jswebsolutions.in/public/uploadsFiles/favicon_icon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="{{ asset('site.css') }}" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div style="margin-bottom:100px;">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid navbar-border">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://jswebsolutions.in/"><i class="fa fa-home"></i> JSWEBSOLUTIONS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="http://jswebsolutions.in/liveDemoCode"><i class="fa fa-arrow-circle-left"></i> Back to Tutorials</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://twitter.com/jswebsolutions1"><i class="fa fa-twitter color-twitter"></i></a></li>
<li><a href="https://www.facebook.com/Js-web-solutions-278328512804761/?modal=admin_todo_tour"><i class="fa fa-facebook color-facebook"></i></a></li>
<li><a href="https://www.linkedin.com/company/jswebsolutions/"><i class="fa fa-linkedin color-linkedin"></i></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="container" style="margin-bottom:20px;">
<div class="row">
<div class="col-sm-12">
<h3>How to image upload in laravel .</h3>
<hr />
</div>
</div>
</div>
<div class="container" style="margin-top:20px;">
<div class="row">
<div class="col-sm-8">
<form id="gallery_upload" name="upload_image" method="POST" enctype="multipart/form-data" action="{{ url('upload_image') }}">
@csrf
<div class="row" style="margin-top:50px;">
<div class="col-md-6 col-sm-12 col-lg-8 padding_div">
<input type="file" name="image" id="image" class="form-control" />
<div style="margin-top:20px;">
<span id="upload_response"></span>
</div>
</div>
<div class="col-md-4 col-sm-12 col-lg-4 padding_div">
<button type="submit" name="submit" id="submit_button" class="btn btn-success"> <i class="glyphicon glyphicon-upload"></i> Upload</button>
<button type="reset" name="reset" id="reset_button" class="btn btn-danger"> <i class="glyphicon glyphicon-refresh"></i> Cancel</button>
</div>
</div>
</form>
</div>
</div>
<hr />
<div class="row">
<div id="delete_response"></div>
</div>
<div class="row" style="margin-top:20px; margin-bottom:100px;" id="load_image_response"></div>
</div>
<script src="jquery.fancybox.min.js"></script>
<script src="custom.js"></script>
<footer class="section footer-classic context-dark bg-image" style="background:#2d3246; margin-top:200px;">
<div class="container">
<div class="row row-30">
<div class="col-md-12 col-xl-3">
<h3>Footer</h3>
</div>
</div>
</div>
</footer>
</body>
</html>