Upload Image in Laravel 8 using Ajax Example Tutorial
In this article, we explain how to upload images in Laravel 8 using ajax jquery Example Tutorial from scratch step by step. More than the time we need to save the image data with an ajax request in the Laravel app without page reload and refresh. If you know then uploading an image in Laravel using ajax and save in a database is too easy. Here we upload files using ajax in Laravel with validations save in the database and remove image and preview option as well. Laravel makes it very easy to store uploaded files using the store method on an uploaded file instance. Call the store method with the path at which you wish to store the uploaded file. So guys let’s checkout Upload Image in Laravel 8 using Ajax with showing validation, preview image and remove image option here.
Step 1: Install Laravel 8 App
First, install Laravel 8 application just run the below command.
composer create-project --prefer-dist laravel/laravel uploadImages
Step 2: Setup Database
Now set up your database, open your .env file, and add the database name, username, and password to it.
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 generate the model and migration file just running the below command.
php artisan make:model Image -m
The command generates two files one is a model and another is a migration file, You need to add a fillable property in the model and open the migration file and add the below code.
database\migrations\2020_09_13_082159_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 adding the code in your migration file now run the migrate command which generates a new table in your database.
php artisan migrate
Add Fillable Property in Model
If we store data in the database then we need to update a fillable property in the model means which columns we must 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
Now in this step, you need to add two routes in your web.php file same as below.
routes\web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
Route::get('upload-images','App\Http\Controllers\ImageController@index');
Route::post('upload-images','App\Http\Controllers\ImageController@storeImage')->name('images.store');
Route::get('/', function () {
return view('welcome');
});
Step 5: Create Controller
Create a new controller.
php artisan make:controller ImageController
After running the above command you got a new controller file open and put the below code on it.
app/Http/Controllers/ImageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\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 create an image file in the view section and put the below code on it.
resources\views\images.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 Using Ajax Example</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</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>
NOTE: Run the Laravel storage link command for uploading images in public and storage directory.
php artisan storage:link
Step 7: Create the “uploads” Directory
Create an uploads folder in your public directory. In ubuntu we need to add permission for our folder, you can take the below command to give permission to your directory, and then you can upload images easily in your database.
Permission to the public folder:
sudo chmod -R 777 public/uploads
Permission to the public folder:
sudo chmod -R 777 storage
So guys, today we learn Laravel 8 Ajax Image Upload with Validations Tutorial Example. I hope its work for you, if any question please comment below.
0 Comments
CAN FEEDBACK
Emoji