Hello Devs,
In this tutorial, we are going to see example of uploading ajax image on laravel 7.
Follow this step by step guide given below:
Step 1 :
Install Laravel 7
composer create-project --prefer-dist laravel/laravel blog
Database Configuration .env
DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret
Step 3:
Create images Table and Model
php artisan make:model Image -m
database/migrations/2020_01_10_102325_create_images_table.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('image');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('images');
}
}
Run this command:
php artisan migrate
app/Image.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = ['image'];
}
Step 4:
Create Route routes/web.php
Route::get('/ajax-image-upload','ImageController@create');
Route::post('/ajax-image-upload','ImageController@store')->name('image.ajax.store');
Step 5:
Create Controller
php artisan make:controller ImageController
app/Http/Controllers/ImageController.php
<?php
namespace App\Http\Controller;
use Illuminate\Http\Request;
use Validator;
use App\Image;
class ImageController extends Controller
{
/**
* Show the application ajaxImageUpload.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('create');
}
/**
* Show the application ajaxImageUploadPost.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$input = $request->all();
$validator = Validator::make($request->all(), [
'image' => 'required',
]);
if($validator->passes()){
$imageName = time().'.'.request()->image->getClientOriginalExtension();
$input['image'] = $imageName;
request()->image->move(public_path('photos'), $imageName);
Image::create($input);
return Response()->json(["success"=>"Image Upload Successfully"]);
}
return response()->json(['error'=>$validator->errors()->all()]);
}
}
Step 6:
Create View resources/views/create.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 7 Ajax Image Upload</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
<style type="text/css">
.mt-5{
margin-top: 150px !important;
}
body{
background: #423E3D;
}
</style>
</head>
<body class="bg-dark">
<div class="container">
<div class="row">
<div class="col-md-6 offset-3 mt-5">
<div class="card">
<div class="card-header">
<h5>Laravel 7 Ajax Image Upload - Rathorji.in</h5>
</div>
<div class="card-body">
<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>
<div class="success alert alert-success">
Image Upload Successfully
</div>
<form enctype="multipart/form-data" id="imageUpload">
<div class="form-group">
<label><strong>Image : </strong></label>
<input type="file" name="image" class="form-control">
</div>
<div class="form-group text-center">
<button class="btn btn-success">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.success').hide();// or fade, css display however you'd like.
});
$('#imageUpload').on('submit',(function(e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST',
url: "{{ route('image.ajax.store')}}",
data:formData,
cache:false,
contentType: false,
processData: false,
complete: function(response)
{
if($.isEmptyObject(response.responseJSON.error)){
$('.success').show();
setTimeout(function(){
$('.success').hide();
}, 5000);
}else{
printErrorMsg(response.responseJSON.error);
}
}
});
}));
function printErrorMsg(msg){
$(".print-error-msg").find("ul").html('');
$(".print-error-msg").css('display','block');
$.each( msg, function( key, value ) {
$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
});
}
</script>
</body>
</html>
I hope this example helps you.