Multi File upload with Image preview and checklist delete options

rajeshkumar — Sat, 19 Jun 2021 06:06:43 +0000

In this tutorial i’m going to describe how to upload multiple image with crud operation edit, update delete in laravel. Image upload is necessary of every project. In this project i’m going to learn how to upload with validation like images, mimes, max file upload and etc, with image preview when uploading image and adding features checklist delete.

So let’s go to download project and configure

Please follow some easy steps define below.

First let’s go to install laravel project

composer create-project laravel/laravel admin-dashboard "5.8.*"

After Installation setup database So go to the .env file and add the database credentials. lets go to .env folder and put database name and connect to database.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=admin-dashboard
DB_USERNAME=root
DB_PASSWORD=

Now migrate the table

php artisan migrate

Next step: Add Resource Route Go to your route and paste below code

use App\Http\Controllers\ProductController;
Route::resource('products', ProductController::class);

Now lets go to create controller, model and migration file go to your terminal and paste below code

php artisan make:model ProductController -mcr

Lets go to your migration file productstable and paste below code.

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('detail');
            $table->string('image');
            $table->timestamps();
        });
    }    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

Now migrate the table

php artisan migrate

Next go to Your ProductController file and paste below code

  
namespace App\Http\Controllers;
  
use App\Product;
use Illuminate\Http\Request;
  
class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $products = Product::latest()->paginate(5);
    
        return view('products.index',compact('products'))
            ->with('i', (request()->input('page', 1) - 1) * 5);
    }
   
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('products.create');
    }
    
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'name' => 'required',
            'detail' => 'required',
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
  
        $input = $request->all();
  
        if ($image = $request->file('image')) {
            $destinationPath = 'image/';
            $profileImage = date('YmdHis') . "." . $image->getClientOriginalExtension();
            $image->move($destinationPath, $profileImage);
            $input['image'] = "$profileImage";
        }
    
        Product::create($input);
     
        return redirect()->route('products.index')
                        ->with('success','Product created successfully.');
    }
     
    /**
     * Display the specified resource.
     *
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function show(Product $product)
    {
        return view('products.show',compact('product'));
    }
     
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function edit(Product $product)
    {
        return view('products.edit',compact('product'));
    }
    
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Product $product)
    {
        $request->validate([
            'name' => 'required',
            'detail' => 'required'
        ]);
  
        $input = $request->all();
  
        if ($image = $request->file('image')) {
            $destinationPath = 'image/';
            $profileImage = date('YmdHis') . "." . $image->getClientOriginalExtension();
            $image->move($destinationPath, $profileImage);
            $input['image'] = "$profileImage";
        }else{
            unset($input['image']);
        }
          
        $product->update($input);
    
        return redirect()->route('products.index')
                        ->with('success','Product updated successfully');
    }
  
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function destroy(Product $product)
    {
        $product->delete();
     
        return redirect()->route('products.index')
                        ->with('success','Product deleted successfully');
    }

    
}

Next go to your Model

app/Models/Product.php


namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable =[
        'name', 'detail', 'image'
    ];
}

Now create some file as define below.

Go to your resources/view folder and create following files inside the products folder as define below file like

1) layout.blade.php
2) index.blade.php
3) create.blade.php
4) edit.blade.php
5) show.blade.php

Next go to resouce/view/products/layout file and paste below code

Go to your app.blade.php file and paste below code




    Multiple Image upload with crud by Laravel Amit
    


  

    @yield('content')

Next go to products/index.blade.php and paste below code

@extends('products.layout')
@section('content')




   
      
         
            Multiple Image upload with crud by Laravel Amit
         
         
             Create New Product
         
      
   
   @if ($message = Session::get('success'))
   
      {{ $message }}
   
   @endif
   
      @foreach ($products as $product)
      
      @endforeach
   
      
         
         No
         Image
         Name
         Email
         Details
         Action
      

         
         {{ ++$i }}
         image }}" width="100px">
         {{ $product->name }}
         {{ $product->email }}
         {{ $product->detail }}
         
            
               Show
               Edit
               @csrf
               @method('DELETE')
               
            
         
      
   {!! $products->links() !!}

@endsection

	No	Image	Name	Email	Details	Action
	{{ ++$i }}	image }}" width="100px">	{{ $product->name }}	{{ $product->email }}	{{ $product->detail }}	Show Edit @csrf @method('DELETE')

Next create files inside the products folder

create.blade.php

Go to create.blade.php file and paste below code

@extends('products.layout')
@section('content')

    

    
        
            Add New Product

        

        
             Back
        

    


     


@if ($errors->any())
    
        Whoops! There were some problems with your input.


        
            @foreach ($errors->all() as $error)
                {{ $error }}

            @endforeach
        

    

@endif
     

    @csrf
    
     
        
        
                  
                      
                        @error('image')
                        {{ $message }}

                        @enderror
                  

              

 
              
        
        
                                        alt="preview image" style="max-height: 250px;">
              

        
        
                
        

    

     




 



@endsection

Next create files inside the products folder

edit.blade.php

Copy below code and paste edit.blade.php file

@extends('products.layout')
     
@section('content')





    
        
            
                Edit Product

            

            
                 Back
            

        

    

     
    @if ($errors->any())
        
            Whoops! There were some problems with your input.


            
                @foreach ($errors->all() as $error)
                    {{ $error }}

                @endforeach
            

        

    @endif
    
     
        @csrf
        @method('PUT')
     
         
         
                
                    Name:
                    
                

            

            
                
                    Email:
                    
                

            

            

            
                
                    Detail:
                    {{ $product->detail }}
                

            

            
                
                    Image:
                    
                    image }}" width="300px">
                

            

            
              
            

        

     
    


@endsection

Next create files inside the products folder

show.blade.php

Copy below code and paste show.blade.php file

@extends('products.layout')
   
@section('content')
    
        
            
                 Show Product

            

            
                 Back
            

        

    

     
    
        
            
                Name:
                {{ $product->name }}
            

        

        
            
                Email:
                {{ $product->email }}
            

        

        
            
                Details:
                {{ $product->detail }}
            

        

        
            
                Image:
                image }}" width="500px">
            

        

    

@endsection

Now go to your terminal paste below code

php artisan serve

http://127.0.0.1:8000/products

Now its showing like this

Now you can see before submit the data image preview image showing fine

These steps are implement on my own learning project and looks like this

Thanks i hope its helpfull for you…. if you have any questions comment below.

The post Multi File upload with Image preview and checklist delete options appeared first on scmGalaxy.

image upload and preview Archives - scmGalaxy

Multi File upload with Image preview and checklist delete options

First let’s go to install laravel project

Now migrate the table

Multiple Image upload with crud by Laravel Amit

Add New Product

Edit Product

Show Product