Upload image in laravel 9 or 8 using ajax Example; In this tutorial you will learn how to upload image in laravel using ajax with showing validation error message. More then times we need to upload a file or image using jquery ajax request and store in database.
Let’s checkout laravel ajax image upload with showing validation, preview and delete image option here.
Step 1 : Install Laravel App
Install a laravel project just adding the below command in your terminal.
composer create-project --prefer-dist laravel/laravel upload-imageStep 2: Setup Database
Open the .env file and update your database credentials.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_images
DB_USERNAME=root
DB_PASSWORD=Step 3: Create Model & Migrations
Now create a model and migration file just running the following command which generate two files. One is model and another is migration file which is generate table in your database. Run bellow command.
php artisan make:model Image -mAfter running the above command now open your migration which is generated in database directory and put the below code on it.
database\migrations\2020_07_25_071908_create_images_table.php
<?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->string('path')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('images');
}
}After successfully updated the code run the migrate command.
php artisan migrateAdd Fillable Property:
If we store data in database then we need to update fillable property in model means which columns we must to update when we store the data.
app\Image.php
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'path'
];Step 4: Make Routes
Add two routes in your web file one for showing image form another is saving data in database. So, open the routes\web.php files and put the below routes on it;
Route::get('upload-images', 'ImageController@index');
Route::post('upload-images', 'ImageController@storeImage');Step 5: Create Controller
Next, create a controller using the following command.
php artisan make:controller ImageControllerAfter generating the controller, open the app/Http/Controllers/ImageController.php file and put the below code on it.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Image;
class ImageController extends Controller
{
public function index()
{
return view('images');
}
public function storeImage(Request $request)
{
$request->validate([
'file' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$image = new Image;
if ($request->file('file')) {
$imagePath = $request->file('file');
$imageName = $imagePath->getClientOriginalName();
$path = $request->file('file')->storeAs('uploads', $imageName, 'public');
}
$image->name = $imageName;
$image->path = '/storage/'.$path;
$image->save();
return response()->json('Image uploaded successfully');
}
}Step 6: Create Blade File
Now, we need to create a new blade file, So navigate resources/views directory and create images.blade.php file. After that open the resources\views\images.blade.php file and add the below code on it;
<!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 Using Ajax Example with Coding Driver</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container mt-4">
<h2>Laravel Image Upload Using Ajax Example with- <a href="https://codingdriver.com/">codingdriver.com</a></h2>
<form method="post" id="upload-image-form" enctype="multipart/form-data">
@csrf
<div class="form-group">
<input type="file" name="file" class="form-control" id="image-input">
<span class="text-danger" id="image-input-error"></span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Upload</button>
</div>
</form>
</div>
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#upload-image-form').submit(function(e) {
e.preventDefault();
let formData = new FormData(this);
$('#image-input-error').text('');
$.ajax({
type:'POST',
url: `upload-images`,
data: formData,
contentType: false,
processData: false,
success: (response) => {
if (response) {
this.reset();
alert('Image has been uploaded successfully');
}
},
error: function(response){
console.log(response);
$('#image-input-error').text(response.responseJSON.errors.file);
}
});
});
</script>
</body>
</html>Step 7: Create “uploads” Directory
Create a uploads folder in your public directory. In ubuntu we need to add permission for our folder, you can take below command to giving permission your directory and then you can upload image easily in your database.
Permission to public folder:
sudo chmod -R 777 public/uploadsPermission to public folder:
sudo chmod -R 777 storageLearn Also: Laravel Image Upload using Dropzone Tutorial Example
So guys, today we learn Laravel Ajax Image Upload with Validations Tutorial Example. I hope its work for you, if any question please comment below.
1 thought on “Laravel 9 Ajax Image Upload with Validations Tutorial Example”