Upload file multiple and display for download Laravel 8

Upload file multiple and display for download Laravel 8

Soeng Souy

Upload file multiple and display for download Laravel 8


Step 1: Update Your Database Credentials

After that update your database credentials in your .env file which is located in your project root.

1. connection databases

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_learn
DB_USERNAME=root
DB_PASSWORD=

Step 2: form upload file

form upload

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Form</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<style>
    body {
        color: #999;
        background: #f5f5f5;
        font-family: 'Roboto', sans-serif;
    }
    .form-control, .form-control:focus, .input-group-addon {
        border-color: #e1e1e1;
        border-radius: 0;
    }
    .signup-form {
        width: 50%;
        margin: 0 auto;
        padding: 30px 0;
    }
    .signup-form h2 {
        color: #636363;
        margin: 0 0 15px;
        text-align: center;
    }
    .signup-form .lead {
        font-size: 14px;
        margin-bottom: 30px;
        text-align: center;
    }
    .signup-form form {		
        border-radius: 1px;
        margin-bottom: 15px;
        background: #fff;
        border: 1px solid #f3f3f3;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;
    }
    .signup-form .form-group {
        margin-bottom: 20px;
    }
    .signup-form label {
        font-weight: normal;
        font-size: 13px;
    }
    .signup-form .form-control {
        min-height: 38px;
        box-shadow: none !important;
        border-width: 0 0 1px 0;
    }	
    .signup-form .input-group-addon {
        max-width: 42px;
        text-align: center;
        background: none;
        border-bottom: 1px solid #e1e1e1;
        padding-left: 5px;
    }
    .signup-form .btn, .signup-form .btn:active {        
        font-size: 16px;
        font-weight: bold;
        background: #19aa8d !important;
        border-radius: 3px;
        border: none;
        min-width: 140px;
    }
    .signup-form .btn:hover, .signup-form .btn:focus {
        background: #179b81 !important;
    }
    .signup-form a {
        color: #19aa8d;
        text-decoration: none;
    }	
    .signup-form a:hover {
        text-decoration: underline;
    }
    .signup-form .fa {
        font-size: 21px;
        position: relative;
        top: 8px;
    }
    
</style>
</head>
<body>
    <div class="signup-form">	
        <form action="{{ route('form/save') }}" method="post" enctype="multipart/form-data">
            @csrf
            <h2>Create Form File Upload</h2>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-cloud-upload"></i></span>
                    <input type="file" class="form-control" name="fileupload[]" required="required" multiple>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block btn-lg">Save</button>
            </div>
        </form>
    </div>
    <div class="container">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Path Name</th>
                    <th>File Name</th>
                    <th>Date Time</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $key=>$items ) 
                <tr>
                    <td>{{ ++$key }}</td>
                    <td>{{ $items->path }}</td>
                    <td><a href="#">{{ $items->file_name }}</a></td>
                    <td>{{ $items->datetime }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

</body>
</html>

Step 3: Controller

controller upload

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use Carbon\Carbon;
use App\Models\formBasic;

class FormController extends Controller
{
    //view page
    public function index()
    {
        return view('form');
    }
    // save record
    public function saveRecord(Request $request)
    { 
        // upload file
        $dt = Carbon::now();
        $folder_name= 'upload';
        $date_time = $dt->toDayDateTimeString();
        \Storage::disk('local')->makeDirectory($folder_name, 0775, true); //creates directory
        if ($request->hasFile('fileupload')) {
            foreach ($request->fileupload as $photo) {
                $destinationPath = $folder_name.'/';
                $file_name = $photo->getClientOriginalName(); //Get file original name                   
                $upload_tbl = [
                    'file_name'=>$file_name,
                    'path'=> $destinationPath.$file_name,
                    'datetime'=>$date_time,
                ];

                \Storage::disk('local')->put($folder_name.'/'.$file_name,file_get_contents($photo->getRealPath()));
                DB::table('uplaod_tbl')->insert($upload_tbl);
            }
        }
        return redirect()->back();
    }
}

Step 4: Route

route

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FormController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return redirect('form/new');
});

Route::get('form/new', [App\Http\Controllers\FormController::class, 'index'])->name('form/new');
Route::post('form/save', [App\Http\Controllers\FormController::class, 'saveRecord'])->name('form/save');

Step 5: databases migrate

table migrate

<?php

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

class CreateUplaodTblsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('uplaod_tbl', function (Blueprint $table) {
            $table->id();
            $table->string('file_name')->nullable();
            $table->string('path')->nullable();
            $table->string('datetime')->nullable();
            $table->timestamps();
        });
    }

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

Step 6: Add in Home Page

php artisan migrate

Step 7: Run

php artisan serve

Reactions
Soeng Souy

Posted by Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

1 Comments

  1. AnonymousJune 8, 2022 at 10:13 AM

    ErrorException
    file_get_contents(C:\Apache24\htdocs\multiple-file-upload\public): failed to open stream: Permission denied

    How to fix this ?
    error in FormController
    Storage::disk('local')->put($folder_name.'/'.$file_name,file_get_contents($photo->getRealPath()));

    ReplyDelete

CAN FEEDBACK

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)

close