Laravel 8.x Multiple Image Upload Tutorial

Hello Artisan

In this tutorial i will show you laravel 8 multiple image upload example. I will show you multiple image upload with validation and after validation we will save it into database.

In this lecture i will create simple multiple image upload in laravel 8. I will show it from scratch so that you can learn easily how to upload multiple image with remove button.

Here i will use jquery to remove selected image and upload it to server if validation is succeeded. Let's see upload multiple images in php laravel 8.

So here you have to follow some steps to do Laravel 8 multiple File Upload with Validation Example. Let's do.

Step 1: Download Laravel 8

Run below command to download laravel 8 app to create multiple image upload.

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

Step 2: Create  Migration and Model

To save it into database we need table. So run below command to create migration.

php artisan make:model File -m

Migration

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


class CreateFormsTable extends Migration
{
    public function up()
    {
        Schema::create('files', function (Blueprint $table) {
            $table->increments('id');
            $table->string('filenames');
            $table->timestamps();
        });
    }


    public function down()
    {
        Schema::dropIfExists('files');
    }
}

Now run migrate command to create file table.

php artisan migrate

Read also : Create Your Own Multilevel Nested Comments System in Laravel

Step 3:  Create Routes

After completing above step in this step, we will create routes for multiple file or image upload. so create two route with GET and POST route example.

routes/web.php

Route::get('image','ImageController@view');
Route::post('image','ImageController@save');

Step 4:  Create Controller

Now we require to add new ImageController controller to save multiple image to the server. So let's create ImageController with view and save method. Make sure you need to create "files" folder in your public directory.

Step 5: Create "files" folder in your public directory.

After creating "files" folder paste this below code in your image controller.

app/Http/Controllers/ImageController.php

namespace App\Http\Controllers;


use Illuminate\Http\Request;


class ImageController extends Controller
{
    
    public function view()
    {
        return view('create');
    }

    public function save(Request $request)
    {


        $this->validate($request, [
                'filenames' => 'required',
                'filenames.*' => 'mimes:doc,pdf,docx,zip'
        ]);


        if($request->hasfile('filenames'))
         {
            foreach($request->file('filenames') as $file)
            {
                $name = time().'.'.$file->extension();
                $file->move(public_path().'/files/', $name);  
                $data[] = $name;  
            }
         }


         $file= new File();
         $file->filenames=json_encode($data);
         $file->save();


        return back()->with('success', 'Data Your files has been successfully added');
    }
}

Step 6:  Create Blade View

in this last step we have to create create.blade.php file in resources folder. So let's create file:

resources/views/create.blade.php

Read also : jQuery Ajax Dynamic Dependent Dropdown in Laravel 7

Now it is time to check our laravel multiple image upload tutorial. Hope it can help you.