Laravel 10 Image Upload using Ajax Tutorial

Laravel 10 Image Upload using Ajax Tutorial

Sometimes, you need to upload images without refreshing the page in your laravel web applications.

So, in this tutorial, you will learn how to upload and save images into database and directory using jquery Ajax in laravel 10 web apps without refresh the web page.

How to upload image using Ajax in Laravel 10

By using the following steps, you can upload and save images into database & directory using ajax jquery in laravel 10 web applications without refresh the whole web page; is as follows:

  • Step 1 – Setup New Laravel 10 Project
  • Step 2 – Setup Database with Laravel App
  • Step 3 – Create Model & Migration
  • Step 4 – Define Routes
  • Step 5 – Create Controller By Artisan Command
  • Step 6 – Create Ajax Image Upload Form
  • Step 7 – Create an Images Directory inside Storage/app/public
  • Step 8 – Run Development Server

Step 1 – Setup New Laravel 10 Project

First of all, start your terminal to download or install Laravel 10 new setup. Run the following commands in it to install the new Laravel 10 app on your system:

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

Step 2 – Setup Database with Laravel App

In this step, Configure your database with your apps. So, visit your app root directory and find .env file. Then configure database details as follows:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

Step 3 – Create Model & Migration

In this step, open again your command prompt. And run the following command on it. To create model and migration:

php artisan make:model Image -m

After that, open create_images_table.php file inside LaravelImage/database/migrations/ directory. And the update the function up() with following code:

    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('path');
            $table->timestamps();
        });
    }

Then, open again command prompt and run the following command to create tables in database:

php artisan migrate

Step 4 – Define Routes

In this step, Visit your routes directory and open web.php file in any text editor. And add the following routes into web.php route file:

use App\Http\Controllers\AjaxImageUploadController;

Route::get('image-upload-ajax', [AjaxImageUploadController::class, 'index']);
Route::post('upload', [AjaxImageUploadController::class, 'store']);

Step 5 – Create Controller By Artisan Command

In this step, execute the following command on terminal/command prompt/command line to create controller file for your laravel applications; is as follow:

php artisan make:controller AjaxImageUploadController

After that, go to app/http/controllers and open AjaxImageUploadController.php file. And update the following code into it:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Image;

class AjaxImageUploadController extends Controller
{
     public function index()
    {
        return view('image-upload-ajax');
    }

    public function store(Request $request)
    {
        
        $validatedData = $request->validate([
         'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',

        ]);

        $name = $request->file('image')->getClientOriginalName();

        $path = $request->file('image')->store('public/images');


        $save = new Image;

        $save->name = $name;
        $save->path = $path;

        $save->save();

        return response()->json($path);

    }
}

The following line of code will upload an image into the images directory:

$path = $request->file('image')->store('public/images');

Step 6 – Create Ajax Image Upload Form

Now, you need to create Ajax image upload form on the blade view file to upload image into database and server directoryu.

So, Go to resources/views and create image-upload-ajax.blade.php and update the following code into it:

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 10 Ajax Image Upload Tutorial - Tutsmake.com</title>

  <meta name="csrf-token" content="{{ csrf_token() }}">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>
<body>

<div class="container mt-4">

  <h2 class="text-center">Image Upload using jQuery Ajax in Laravel 10 - Tutsmake.com</h2>

      <form method="POST" enctype="multipart/form-data" id="image-upload" action="javascript:void(0)" >
                
          <div class="row">

              <div class="col-md-12">
                  <div class="form-group">
                      <input type="file" name="image" placeholder="Choose image" id="image">
                  </div>
              </div>
                
              <div class="col-md-12">
                  <button type="submit" class="btn btn-primary" id="submit">Submit</button>
              </div>
          </div>     
      </form>
</div>
<script type="text/javascript">
     
$(document).ready(function (e) {
   
   $.ajaxSetup({
       headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
   });
  
  
   $('#image-upload').submit(function(e) {

     e.preventDefault();
  
     var formData = new FormData(this);
  
     $.ajax({
        type:'POST',
        url: "{{ url('upload')}}",
        data: formData,
        cache:false,
        contentType: false,
        processData: false,
        success: (data) => {
           this.reset();
           alert('Image has been uploaded using jQuery ajax successfully');
        },
        error: function(data){
           console.log(data);
         }
       });
   });
});

</script>
</div>  
</body>
</html>

Step 7 – Create an Images Directory inside Storage/app/public

Now, create an images directory inside the storage/app/public directory. Because the following line of code will upload an image into the images directory, which is located inside the storage/app/public/ directory.

Step 8 – Run Development Server

The last step, open the command prompt and run the following command to start the development server:

php artisan serve

Then open your browser and hit the following URL on it:

http://127.0.0.1:8000/image-upload-ajax

Conclusion

By following this tutorial, you have learned how to implement Ajax image upload functionality to upload images without refreshing the whole web page in laravel 10 apps.

Recommended Laravel Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *