Laravel 8 Multiple File Upload Tutorial

How To Upload Multiple Files in Laravel

Handling Multiple File Upload in Laravel

Laravel Multiple Files Upload Tutorial Example From Scratch

1. Create Model 

                Model Name : PurchaseBill

2. Create Database

    Database given Field :  Name , User_id, File or Image

3. Create Controller 

 //Controller

 

public function add(Request $request)

    {

        if($request->isMethod('post'))

        {

            $data = $request->all();

            $validatedData = $request->validate

            ([

                'name' => 'required',

                'image_path.*' => 'mimes:doc,pdf,docx,zip',

                'file.*' => 'required|image|mimes:jpeg,png,jpg,gif,svg,pdf,xls,xlsx|max:2048',

            ]);          

            if(Auth::guard('admin')->user()->user_type == 'super'){

                $user_data_id = Auth::guard('admin')->user()->id;                 

            } else{

                $user_data_id = Auth::guard('admin')->user()->id;

            }

            

            $gstr_detail            = new PurchaseBill();

            $gstr_detail->name      = $data['name'];

            $gstr_detail->user_id   = $user_data_id;

            $files = $request->file('file');

            //upload multipal file one row diffrent name with seprate comma

            $i = 0;

            if($request->hasfile('file')){

                foreach ($files as $file) {

                    // $name = $file->getClientOriginalName();

                    //with $i help you save diffrent name file

                    $name = time() . $i . '.' . $file->getClientOriginalExtension();

                    //movie file in folder location

                    $file->move(public_path() . '/uploads/', $name);

                    $datavk[] = $name;

                    //save data in database with diffrent name with comma

                    $gstr_detail->file  = implode(",",$datavk);

                    $i++;

                }

            }

          //  $gstr_detail->file    = implode(",",$datavk);

            if($gstr_detail->save()){

                return redirect('/admin/purchase-bill')->with('success','Added successfully');

            } else {

                return redirect('/admin/purchase-bill')->with('errors',COMMON_ERROR);

            }

        }

        $page = 'sale_bill';

        return view('backEnd.dataManagement.purchase.form', compact('page'));

    }

 

 

Main Method : You can Upload multipal file in a row with seprate 

    Without any problem  

          

            Model Name : PurchaseBill 

 

            $gstr_detail            = new PurchaseBill();

            $gstr_detail->name      = $data['name'];

            $gstr_detail->user_id   = $user_data_id;

            $files = $request->file('file');

            //upload multipal file one row diffrent name with seprate comma

            $i = 0;

            if($request->hasfile('file')){

                foreach ($files as $file) {

                    // $name = $file->getClientOriginalName();

                    //with $i help you save diffrent name file

                    $name = time() . $i . '.' . $file->getClientOriginalExtension();

                    //movie file in folder location

                    $file->move(public_path() . '/uploads/', $name);

                    $datavk[] = $name;

                    //save data in database with diffrent name with comma

                    $gstr_detail->file  = implode(",",$datavk);

 

                    $i++;

                }

            }

          //  $gstr_detail->file    = implode(",",$datavk);

            if($gstr_detail->save()) 

 

Model File

 

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class PurchaseBill extends Model

{

    //

    protected $fillable = [

        'user_id','name','file'

    ];

}

 

 

View File

<form id="example-form" action="" class="" method="post" enctype="multipart/form-data">

    @csrf

    <div>

        <!-- <h3>Profile</h3> -->

        <section>

            <div>

                <label for="name">Purchase Bill Name </label>

                <input id="name" name="name" type="text" class="required form-control" value="">

            </div><br>

                                  

            <div class="custom-file">

                <input type="file" name="file[]" class="custom-file-input" id="images" multiple="multiple" width="10%" height="10%" accept=".jpg, .png, .gif, .jpeg,   

                .xlsx, .pdf" >

                <label class="custom-file-label" for="images">Choose image</label>

            </div> 

        </section>

        <div class="card-body">

            <input type="hidden" name="_token" value="{{ csrf_token() }}">

            <button type="submit"  name="submit"  class="btn btn-primary" style="float: right; margin-bottom: 20px">Upload Images</button>

        </div>

    </div>

    <div class="row">

        <div class="col-md-4">

            <div class="user-image mb-3 text-center">

                <div class="imgPreview" style="height:250px; width:250px" > </div>

            </div> 

        </div>

    </div>

    

</form>

 

 

<script>

    $(function() {

    // Multiple images preview with JavaScript

    var multiImgPreview = function(input, imgPreviewPlaceholder) {

        if (input.files) {

            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {

                var reader = new FileReader();

                reader.onload = function(event) {

                    $($.parseHTML('<img style="height:250px; width:250px; diplay:inline block; float:left;" >')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);

                }

                reader.readAsDataURL(input.files[i]);

            }

        }

    };

    $('#images').on('change', function() {

        multiImgPreview(this, 'div.imgPreview');

    });

    });    

</script>

 

 

 data base

 

 11111 111