Skip to content

DataOps Blog

Just another DataOps site

  • Home
  • certification
  • consultant
  • consulting
  • Contact Us!
  • courses
  • Intro to Laravel
  • tools
  • trainer
  • training

How to Upload Image in Laravel with Ajax

August 10, 2021
By Rajesh Kumar In Laravel

How to Upload Image in Laravel with Ajax

In this tutorial im going to describe how to upload image in larvel with Ajax example. Please follow mentioned below.

First let’s go to install laravel project

composer create-project --prefer-dist laravel/laravel ajaximage

lets go to .env folder and put database name and connect to database.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ajax-image
DB_USERNAME=root
DB_PASSWORD=

Nex to Create ajax_images Table and Model

php artisan make:migration create_ajax_image_tabel

Next go to ajaximage table and paste below code.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateAjaxImageTabel extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('ajax_image_tabel', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('image');
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('ajax_image_tabel');
}
}

Now we require to run migration be bellow command:

php artisan migrate

Now table has been successfully migrated to database.

Next to create model run below code

php artisan make:model AjaxImage

Go to your model file and paste below code.

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class AjaxImage extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'title', 'image'
];
}

Step 4: Create Route

In this is step we need to create route for ajax image upload layout file and another one for post request. so open your routes/web.php file and add following route.

routes/web.php

Route::get('ajaxImageUpload', 'AjaxImageUploadController@ajaxImageUpload');
Route::post('ajaxImageUpload', 'AjaxImageUploadController@ajaxImageUploadPost')->name('ajaxImageUpload');

Step 5: Create Controller

php artisan make:controller AjaxImageUploadController

Next go to AjaxImageUploadController and paste below code.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator;
use App\AjaxImage;

class AjaxImageUploadController extends Controller
{
/**
* Show the application ajaxImageUpload.
*
* @return \Illuminate\Http\Response
*/
public function ajaxImageUpload()
{
return view('ajaxImageUpload');
}

/**
* Show the application ajaxImageUploadPost.
*
* @return \Illuminate\Http\Response
*/
public function ajaxImageUploadPost(Request $request)
{
$validator = Validator::make($request->all(), [
'title' => 'required',
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);


if ($validator->passes()) {


$input = $request->all();
$input['image'] = time().'.'.$request->image->extension();
$request->image->move(public_path('images'), $input['image']);


AjaxImage::create($input);


return response()->json(['success'=>'done']);
}


return response()->json(['error'=>$validator->errors()->all()]);
}
}

Next to create view

resources/views/ajaxImageUpload.blade.php

<!DOCTYPE html>
<html>
<head>
<title>LaravelAmit - Ajax Image Uploading Tutorial</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>


<div class="container">
<h1>Laravel Ajax Image Uploading Tutorial</h1>


<form action="{{ route('ajaxImageUpload') }}" enctype="multipart/form-data" method="POST">


<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>


<input type="hidden" name="_token" value="{{ csrf_token() }}">


<div class="form-group">
<label>Alt Title:</label>
<input type="text" name="title" class="form-control" placeholder="Add Title">
</div>


<div class="form-group">
<label>Image:</label>
<input type="file" name="image" class="form-control">
</div>


<div class="form-group">
<button class="btn btn-success upload-image" type="submit">Upload Image</button>
</div>


</form>


</div>


<script type="text/javascript">
$("body").on("click",".upload-image",function(e){
$(this).parents("form").ajaxForm(options);
});


var options = {
complete: function(response)
{
if($.isEmptyObject(response.responseJSON.error)){
$("input[name='title']").val('');
alert('Image Upload Successfully.');
}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>

Now go to your terminal and paste below code.

php artisan serve

Now go to phpmyadmin and check table data has been store successfully.

Thanks.

ajax image-upload Laravel laravel-form
Written by:

Rajesh Kumar

View All Posts

Recent Posts

  • Kubernetes CKA Training Course & Official Master Certification Program
  • Elastic Training Course & Official Master Certification Program
  • Prometheus Training Course & Official Master Certification Program
  • AppDynamics Training Course & Official Master Certification Program
  • Dynatrace Training Course & Official Master Certification Program
  • Grafana Training Course & Official Master Certification Program
  • Newrelic Training Course & Official Master Certification Program
  • Splunk Training Course & Official Master Certification Program
  • Datadog Training Course & Official Master Certification Program
  • Zabbix Training Course & Official Master Certification Program
  • MLOps Training Course & Official Master Certification Program
  • DataOps Training Course & Official Master Certification Program
  • AiOps Training Course & Official Master Certification Program
  • Gitops Training Course & Official Master Certification Program
  • SRE Training Course & Official Master Certification Program
  • DevSecOps Training Course & Official Master Certification Program
  • DevOps Training Course & Official Master Certification Program
  • Best Blog website for Health and Fitness mymedicplus.com/blog
  • Top 5 Basic Programming Question for interview purpose in JS.
  • JAVA SCRIPT VARIABLE AND DATATYPE.

Archives

Categories

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
  • Free Video Tutorials
  • DevOps School
  • Best DevOps
  • scmGalaxy
  • Artificial Intelligence
  • DataOps
  • AIOps
  • GuruKul Galaxy
  • DevOps Consulting
  • DevOps Freelancers
  • DevOps Trainer
  • Free Ebooks
  • School for Debugger
  • Holiday Landmark
  • Surgery Planet
  • My Hospital Now
  • My Medic Plus
  • ProfessNow
  • Cotocus
  • Stocks Mantra
  • I Reviewed

Proudly powered by WordPress | Theme: BusiCare by SpiceThemes