Video Upload and Display in Laravel 8 Using Tailwindcss

4 min readJul 25, 2022

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

composer create-project laravel/laravel cd media_uploadcd 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 the 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 the 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 tailwindcssnpx 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;

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