Home Html PHP Laravel File Upload with Progress Bar Example

PHP Laravel File Upload with Progress Bar Example

by Shahriar Sagor

Hello dev’s ,I hope all are okay. Today i will give you a awesome topics. If you have to need a file uploading with progress bar also with percentage by using jquery form js in php laravel 5, laravel 6, laravel 7 and laravel 8 application. A progress bar is a very helpful to show a client how much uploaded done. i will show you how to PHP Laravel File Upload with Progress Bar work.

We always did file uploading with a normal way and we can do it very easily. But when we have a large amount of file size then it takes long time to upload on a server. So we can’t reduce time to upload file or image on server, but we can display a simple progress bar with a percentage to see how much time to need.  So the client can understand how much time is remaining to upload a file. So, in this tutorial, I will create file upload with a progress bar in laravel 8.

I will show it steps by steps tutorial of file upload with progress bar by using jquery form js. So, just need to follow few steps and I will get a layout like as below:

Step 1: Create Routes

Now in first step, we will add new routes on our routes file. One route for display view and also we will write jquery code in view file. In Second route, we will create for POST route for file upload.


Route::get('file-upload', 'FileController@fileUpload');
Route::post('file-upload', 'FileController@fileUploadPost')->name('fileUploadPost');

Step 2: Create FileController

Now in second step, we need to create a controller as name FileController with fileUpload() and fileUploadPost() functions. Just create a new controller and put bellow code on it:

Read Also : Ajax CRUD with Laravel 8 Tutorial with Example for Beginners


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)
            '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

That’s good.Now we are in our Last step, here we require to create a fileUpload.blade.php file and we write code for jquery and also i show you with progress bar. So you have to need simply add bellow code on following path:


<!DOCTYPE html>
    <title>Laravel 8 - File upload with progress bar - Codingspoint.com</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        .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;}
<div class="container">
    <div class="card">
      <div class="card-header">
        <h2>Laravel 8 - File upload with progress bar - Codingspoint.com</h2>
      <div class="card-body">
            <form method="POST" action="{{ route('fileUploadPost') }}" enctype="multipart/form-data">
                <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 >
                    <input type="submit"  value="Submit" class="btn btn-success">
<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');
        beforeSubmit: validate,
        beforeSend: function() {
            var percentVal = '0%';
            var posterValue = $('input[name=file]').fieldValue();
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
        success: function() {
            var percentVal = 'Wait, Saving';
        complete: function(xhr) {
            alert('Uploaded Successfully');
            window.location.href = "/file-upload";

That good. We are ready to check.Just fire bellow command and check on url

Read Also : How to Solve Target Class Does Not Exist In Laravel

php artisan serv

Thanks for read.Hope it will help you,You can also follow us on facebook


You may also like