PHP Laravel File Upload with Progress Bar Example

By Hardik Savani August 4, 2018 Category : PHP Laravel jQuery Ajax

It would be awesome if you have file uploading progress bar with percentage using jquery form js in php laravel 5, laravel 6, laravel 7 and laravel 8 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', '[email protected]');
Route::post('file-upload', '[email protected]')->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.']);
    }
}

Read Also: PHP - File upload progress bar with percentage using form jquery example

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:

Read Also: Laravel Vue JS Image Upload Example with Demo
http://localhost:8000/file-upload

I hope it can help you...

Tags :

We are Recommending you

Popular Posts

Categories

Latest Posts