laravel-websockets without pusher

Laravel Multiple Image Upload Example

Hello, Here I am talking about laravel Multiple image upload Example with proper custom validation in this example. Here I am writing one by one steps for how to laravel Multiple image upload Example example work with validation 

Here I am trying to writing code for all laravel versions, not for single laravel versions.This code will help you to put any type of laravel version it will work on your laravel version. If anyone has doubts about the version of laravel related to code just see here once. Apply code and run it and contact me if this code not running on your version 

I am putting validation here related image also.

Read More: Laravel Validation Example

I am starting code here for laravel Multiple image upload Example

Step: 1 
Create controller, model and migration file using below command

php artisan make:model Image -mcr

-above command will create 3 files into after once you apply command

I)create a controller file in app/Http/Controller/ImageController.php
II)create model into app/Image.php
III)create also migration file into database/migration/database/migrations/2020_07_04_112145_create_images_table.php

Route: 2 Modify migration file like below 

Route: 3 Run migration  

<?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('image');
            $table->timestamps();
        });
    }

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

php artisan:migrate

Related Link: Laravel Multiple Image Upload Issue Solve

Route: 4 create route into routes/web.php file

Route::get('upload-image','ImageController@index');
Route::post('image-save','ImageController@store')->name('image-save');

Route: 5 Modify controller & model file like below code

app/Image.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    protected $guarded = [];
}

In Laravel, fillable attributes are used to specify those fields which are to be mass assigned. Guarded attributes are used to specify those fields which are not mass assignable.

app/Http/Controller/ImageController.php

<?php


namespace App\Http\Controllers;

use App\Image;
use Illuminate\Http\Request;
use Validator;
use Session;

class ImageController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('image');
    }


    /**
     * Store a newly created resource in storage.
     *
     * @param \Illuminate\Http\Request $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        try {
            $validator = Validator::make($request->all(), [
                'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg',
            ]);
            if ($validator->passes()) {
                $images = $request->file('files');
                if ($request->hasFile('files')) {
                    foreach ($images as $item) {
                        $time = time() . date("Y-m-d");
                        $imageName = $time . '-' . $item->getClientOriginalName();
                        $item->move(public_path() . "''/images/'", $imageName);
                        $arr[] = $imageName;
                    }
                    $image = implode(",", $arr);
                } else {
                    $image = '';
                }
                Image::create(['image' => $image]);
                Session::flash('success', 'Successfully Multiple Images Inserted');
                return redirect('upload-image');
            } else {
                Session::flash('error', $validator->errors()->all()[0]);
                return redirect('upload-image');
            }
        } catch (\Exception $e) {
            Session::flash('error', $e->getMessage());
            return redirect('upload-image');
            return response()->json(['status' => false, 'msg' => $e->getMessage()]);
        }
    }
}

In the above controller, you can show I am using try{}catch(){} and also using validator coz of catch the error if any function error it will catch into catch function and it there is any error into validation than it will pass into else condition of validation

Route: 6 create blade file which is defined into upload-image get method route of index function

resources/views/image.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Multiple Image Upload Example - <a href="https://www.mtitsolutions.in/">MTitsolutions</a></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>

<div class="container">
    <div class="card">
        <div class="card-header">
            Laravel Multiple Image Upload Example - <a href="https://www.mtitsolutions.in/">MTitsolutions</a>
        </div>
        <div class="card-body">
            @if(Session::has('success'))
                <div class="alert alert-success">
                    <strong>Success!</strong> <p>{{Session::get('success')}}</p>
                </div>
            @endif
            @if(Session::has('error'))
                <div class="alert alert-danger">
                    <strong>Error!</strong> <p>{{Session::get('error')}}</p>
                </div>
            @endif
            <form action="{{ route('image-save') }}" method="POST" class="image_upload" enctype="multipart/form-data">
                @csrf
                <input type="file" name="image" class="form-control" required multiple>
                <br>
                <button class="btn btn-primary">Upload File</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

View On Github

Output:

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

That's it.
Happy coding.
I hope this post will help you a lot.

More Links

1. Crud operation in Laravel 7
2. how to use sweetalert2 message box in Laravel?
3. Laravel Ajax Image Upload
4. composer update failed - out of memory/killed
5. Laravel - Websocket
6. how to integrate admin template in laravel 6
7. Latitude Longitude Radius Query Laravel
8. laravel validation with example