PHP Laravel File Upload with Progress Bar Example
In this post we will give you information about PHP Laravel File Upload with Progress Bar Example. Hear we will give you detail about PHP Laravel File Upload with Progress Bar ExampleAnd how to use it also give you demo for it if it is necessary.
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 AppHttpControllers;
use IlluminateHttpRequest;
class FileController extends Controller
{
/**
* Show the application dashboard.
*
* @return IlluminateHttpResponse
*/
public function fileUpload()
{
return view('fileUpload');
}
/**
* Show the application dashboard.
*
* @return IlluminateHttpResponse
*/
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 >
<div >
<div >
<h2>Laravel 5.6 - File upload with progress bar - ItSolutionStuff.com</h2>
</div>
<div >
<form method="POST" action="{{ route('fileUploadPost') }}" enctype="multipart/form-data">
@csrf
<div >
<input name="file" id="poster" type="file" ><br/>
<div >
<div ></div >
<div >0%</div >
</div>
<input type="submit" value="Submit" >
</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…
Hope this code and post will helped you for implement PHP Laravel File Upload with Progress Bar Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs