PHP Laravel File Upload with Progress Bar Example

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

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.

routes/web.php

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

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

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:

resources/views/fileUpload.blade.php

<!DOCTYPE html>
<html>
<head>
    <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">
    <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 8 - File upload with progress bar - Codingspoint.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>

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

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →