Video Upload and Display in Laravel 8 Using Tailwindcss

This is a step by step tutorial on Laravel 8 File(Video) Upload using Tailwindcss with validations and storing file path in MySQL database.

Create a fresh project using the command below

laravel new media_upload

**OR **

composer create-project laravel/laravel --prefer-dist media_upload

cd media_upload

** Open Laravel app in your favorite editor & Create model with migration table**

php artisan make:model File -m

Navigate to database>migrations folder open the files migration file and add the following fields

    $table->string('name')->nullable();
    $table->string('file_path')->nullable();
    $table->string('description')->nullable();

Open File.php under Models folder >

Add the fields to allow storing of data

Set a get attribute for accessing file path on the database

protected $fillable = [ 'name', 'file_path', 'description'  ];


    public function getPath()
    {
        $url = 'uploads/'.$this->file_path;
        return $url;
    }

Open .env to configure database according to your settings

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306    
DB_DATABASE=media_upload
DB_USERNAME=root
DB_PASSWORD=

Next Run php artisan migrate to migrate files to database

php artisan migrate

Create UploadController file to handle logic and display of view for the uploading and displaying of file.

php artisan make:controller UploadController

Next Open web.php under routes folder and add the following codes


use App\Http\Controllers\UploadController;

Route::get('/upload', [UploadController::class, 'create']);
Route::post('/upload', [UploadController::class, 'store'])->name('store');
Route::get('/display', [UploadController::class, 'display']);

Next Open UploadController file and define the following methods..

    public function create(){
        return view('upload.form');
    }

public function store(Request $request){

        $request->validate([
        'name' => 'required|alpha_num',
        'file' => 'required|mimes:mpeg,ogg,mp4,webm,3gp,mov,flv,avi,wmv,ts,qt|max:2048',
        'description' => 'required|alpha_num'
        ]);

        $fileUpload = new File;

        if($request->hasFile('file')) {
            $file = $request->file('file');
            $fileName = time().'_'.$request->file->getClientOriginalName();
            $file->move('uploads', $fileName);
            $fileUpload->name = $request->name;
            $fileUpload->description = $request->description;
            $fileUpload->file_path = $fileName;
            $fileUpload->save();

            return back()
            ->with('success','File has been uploaded.')
            ->with('file', $fileName);
        }

   }


   public function display(){
       //for demo purposes we'll access the first file
        $file = File::first();
        return view('upload.display')->with(compact('file'));
   }

We’re using Tailwindcss for our views

** Next Run the following commands on your command prompt or git bash to setup Tailwindcss **

npm install

npm install -D tailwindcss


npx tailwindcss init

Next, you should add each of Tailwind's "layers" to your application's resources/css/app.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

app.css.png

Once you have configured Tailwind's layers, you are ready to update your application's webpack.mix.js file to compile your Tailwind powered CSS:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

To compile assets

npm run dev

Finally, you should reference your stylesheet in your application's primary layout template. Many applications choose to store this template at resources/views/layouts/app.blade.php. In addition, ensure you add the responsive viewport meta tag if it's not already present:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/css/app.css" rel="stylesheet">
</head>

** Create the layouts then add app.blade.php **

Create partials folder, also create navbar.blade.php, footer.blade.php files inside the partials folder

Next create a folder named upload under views and create the following files

form.blade.php display.blade.php

You can get all the views from this repository Media Upload Repo and update the blade files with the tailwindcss codes.

Serve application using the serve artisan command


php artisan serve

Output

💡

Follow me on Hashnode: Alemsbaja X: Alemsbaja | Youtube: Tech with Alemsbaja to stay updated on more articles

Find this helpful or resourceful?? kindly share and feel free to use the comment section for questions, answers, and contributions.

Video Upload and Display in Laravel 8 Using Tailwindcss

Laravel 8 Video Upload & Display Tutorial With Validation & Storing file path in Database

Did you find this article valuable?