Laravel 8 File Uploading With Validation

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
Laravel 8 File Uploading With Validation

Hi Dev’s, Now today, in this blog I will show you how to store file also with validation in laravel 8 application. Now here i will add validation also with image upload in laravel 8 application.

Here i will add image upload validation as like image, mimes, max file upload etc. So we can easily understand and also we can do it simply. Now in this blog made easy to upload the image to the folder and also store into the database in the laravel 8 application.

Now we can upload images into folder and also in database also with laravel validation as bellow.

Just need  we need to Follow the bellow step.

Step 1 : Install Laravel project

At in this step we can install fresh laravel project by using bellow command.

composer create-project --prefer-dist laravel/laravel blog
Step 2 : Create Migration & Model

Now we will run bellow command to create migration and model in laravel application.

php artisan make:model Image -m

So above command to create one table migration file and one model file.

database/migrations/2019_12_11_111847_create_images_table.php

<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreateImagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->increments('id');
            $table->string('image');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
}

Just bellow command to use migrate your table.

php artisan migrate
Step 3 : Create Controller

Now in this step need to create controller file to use bellow command.

php artisan make:controller ImageController
Step 4 : Create Controller method

So now create controller after you can put the bellow code in controller file.

app/http/controllers/ImageController

<?php

namespace App\Http\Controllers;

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

class ImageController extends Controller
{

    public function create()
    {
        return view('create');        
    }

    public function store(Request $request)
    {
        $request->validate([
            'img' => 'required|mimes:jpeg,jpg,png',
        ]);
        $input = $request->all();
        $file = $request->file('img');
        $input['img'] = $file->getClientOriginalName();
        $file->move(public_path('upload'),$file->getClientOriginalName());
        Image::create(['image' => $input['img']]);
        
        return redirect()->back();

    }
}
Step 5 : Create Routes

Now in this step i will create route in web.php file.

routes/web.php

Route::get('image','ImageController@create')->name('image.create');
Route::post('image','ImageController@store')->name('image.store');
Step 6 : Create View File

So in this step you can create blade file in laravel app.

resources/views/create.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />	
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row mt-5">
            <div class="col-md-6 offset-3">
                <div class="card">
                    <div class="card-heading bg-success">
                        <h2 class="text-center text-white p-2"><b>Upload Image</b></h2>
                    </div>
                    <div class="card-body">
                        @if (count($errors) > 0)
                            @foreach($errors->all() as $error)
                               <div class="alert alert-danger">{{ $error }} </div>
                            @endforeach 
                        @endif
                        <form action="{{ route('image.store') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label>Image*</label>
                                <input type="file" name="img" class="form-control">
                            </div>
                            <div class="form-group" class="text-center">
                                <button class="btn btn-success btn-sm">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Read Also : Laravel Toastr Notifications Example

Thanks for read. I hope it help you. For more you can follow us on facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →