In this article, we will learn how to upload a file with a progress bar in Laravel 8. Here we will create a view, controller, and model, and simple javascript code for the progress bar then we will set the routes for our view blade files.
Follow some steps to upload a file with migrations in laravel 8:
Step 1:
Create view file and put following code for creating fill upload file:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Ajax File Upload with Progress Bar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
body{
background: #ccc;
}
form{
background: #fff;
padding: 20px;
}
.progress {
position:relative;
width:100%;
}
.bar {
background-color: #00ff00;
width:0%;
height:20px;
}
.percent {
position:absolute;
display:inline-block;
left:50%;
color: #040608;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-8 offset-md-2">
<form method="POST" action="{{url('upload')}}" enctype="multipart/form-data">
<h4>Laravel 8 Ajax File Upload with Progress Bar</h4>
@csrf
<div class="form-group">
<input name="file" type="file" class="form-control"><br/>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<br>
<input type="submit" value="Submit" class="btn btn-dark btn-lg col-12">
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
<script type="text/javascript">
var SITEURL = "{{URL('/')}}";
$(function () {
$(document).ready(function () {
var bar = $('.bar');
var percent = $('.percent');
$('form').ajaxForm({
beforeSend: function () {
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function (xhr) {
alert('File Has Been Uploaded Successfully');
window.location.href = SITEURL + "/" + "upload-form";
}
});
});
});
</script>
</body>
</html>
Step 2:
Generate Controller UploadFileController via artisan command
php artisan make:controller UploadFileController
Step 3:
UploadFileController.php, this is our controller file and will automatically generate in the following directory
app/Http/Controllers/
┗ UploadFileController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
//include post mirgration
use App\Models\Post;
class UploadFileController extends Controller {
public function index() {
return view('upload-form');
}
public function upload(Request $request) {
$request->validate([
'file' => 'required',
]);
$title = time() . '.' . request()->file->getClientOriginalExtension();
$request->file->move(public_path('uploads'), $title);
$storeFile = new Post;
print_r($storeFile);
$storeFile->title = $title;
$storeFile->save();
return response()->json(['success' => 'File Uploaded Successfully']);
}
}
Step 4:
Create Migration & Model
php artisan make:model Post -m
Step 5:
Navigate to database/migrations folder and open create_posts_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePostsTable extends Migration {
/**
* Run the migrations.
*
* @return void
*/
public function up() {
Schema::create('posts', function (Blueprint $table) {
$table->id();
//add title
$table->string('title');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down() {
Schema::dropIfExists('posts');
}
}
Step 6:
Run the following command to migrate the table into your select database:
php artisan migrate
Step 7:
make the routes of our controller
routes/
┗ web.php
<?php
use Illuminate\Support\Facades\Route;
//custom controllers
use App\Http\Controllers\UploadFileController;
Route::get('/', function () {
return view('welcome');
});
//call the controller and its method
Route::get('/upload-form', [UploadFileController::class, 'index']);
Route::any('/upload', [UploadFileController::class, 'upload']);
Step 8:
Open command window and run the server
php artisan serve
Step 9:
your browser and navigate the following URLs into it:
http://127.0.0.1:8000/upload-form
Output:
Note: all your file will be uploaded here
public/
┣ uploads/
┃ ┣ 1612384804.png
If your project doesn't have an uploads directory, you can create an inside public folder. see the above directory structure