PHP Laravel File Upload with Progress Bar Example
It would be awesome if you have file uploading progress bar with percentage using jquery form js in php laravel 5.6 application. a progress bar is very helpful to show a client how much uploaded done.
You always did file uploading with a normal way and you can do it easily. But when you have a large amount of file size then it takes time to upload on a server. Maybe you can't reduce time to upload file or image, but you can display a progress bar with a percentage, so the client can understand how much is remaining to upload a file. So, in this tutorial, we will create file upload with a progress bar in laravel 5.
I write step by step tutorial of file upload with progress bar using jquery form js. So, just follow few step and will get layout like as below:
Preview:
Step 1: Create Routes
In first step, we will add new two routes. One for display view and we will write jquery code in view file. In Second step, we will create POST route for file upload.
routes/web.php
Route::get('file-upload', 'FileController@fileUpload');
Route::post('file-upload', 'FileController@fileUploadPost')->name('fileUploadPost');
Step 2: Create FileController
In second step, we need to create FileController controller with fileUpload() and fileUploadPost(). just create new controller and put bellow code on it:
app/Http/Controllers/fileUploadPost.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FileController extends Controller
{
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function fileUpload()
{
return view('fileUpload');
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function fileUploadPost(Request $request)
{
$request->validate([
'file' => 'required',
]);
$fileName = time().'.'.request()->file->getClientOriginalExtension();
request()->file->move(public_path('files'), $fileName);
return response()->json(['success'=>'You have successfully upload file.']);
}
}
Step 3: Create Blade File
In this Last step, we require to create fileUpload.blade.php file and we write code for jquery and show you with progress bar. So you have to simply add bellow code on following path:
resources/views/fileUpload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 5.6 - File upload with progress bar - ItSolutionStuff.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
.progress { position:relative; width:100%; border: 1px solid #7F98B2; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:25px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; color: #7F98B2;}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<h2>Laravel 5.6 - File upload with progress bar - ItSolutionStuff.com</h2>
</div>
<div class="card-body">
<form method="POST" action="{{ route('fileUploadPost') }}" enctype="multipart/form-data">
@csrf
<div class="form-group">
<input name="file" id="poster" type="file" class="form-control"><br/>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<input type="submit" value="Submit" class="btn btn-success">
</div>
</form>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
function validate(formData, jqForm, options) {
var form = jqForm[0];
if (!form.file.value) {
alert('File not found');
return false;
}
}
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSubmit: validate,
beforeSend: function() {
status.empty();
var percentVal = '0%';
var posterValue = $('input[name=file]').fieldValue();
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = 'Wait, Saving';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
alert('Uploaded Successfully');
window.location.href = "/file-upload";
}
});
})();
</script>
</body>
</html>
After followed successfully you must have to create "files" folder with full permissions, After that you can quick run by following command:
php artisan serve
Now you can open bellow url on your browser:
http://localhost:8000/file-upload
I hope it can help you...
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Tags :
Ajax Example File Upload Form Jquery jQuery Laravel Laravel 5 Laravel 5.2 Laravel 5.3 Laravel 5.4 Laravel 5.5 Laravel 5.6 PHP Progress Bar TutorialFeatured Post
- Laravel 5.6 - Multiple Image Upload Using bootstrap-fileinput
- Laravel 5 - Ajax crop image before upload using using croppie plugin
- Laravel 5 amazon s3 file upload tutorial - Part 1
- Ajax Image Upload Example with Validation in PHP Laravel Framework
- Bootstrap progress bar animate example using bootstrap-progressbar.js
- PHP - File upload progress bar with percentage using form jquery example