Video Upload and Display in Laravel 8 Using Tailwindcss
Laravel 8 Video Upload & Display Tutorial With Validation & Storing file path in Database
I’m a Software Engineer with over 5+ years of experience in Technology with a track record in building web applications, mobile applications and Technical Writing. Readily available to explore innovations in ICT and creatively use them to build solutions. Advancing my career in software engineering and contributing to the growth of tech communities around the world. I’m also passionate about working with organizations especially tech, security experts and airline industries to learn and also make contributions that will be a legacy.
Tech is Easy to Learn - https://amazon.com/dp/B0B8T838K
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;
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
Find this helpful or resourceful?? kindly share and feel free to use the comment section for questions, answers, and contributions.
